Как внедрить css из vue в шаблон django?

У меня django в качестве backend, vue в качестве frontend - использую шаблон из https://github.com/ilikerobots/cookiecutter-vue-django

Я хочу интегрировать quasar для своего фронтенда. Вот моя настройка в main.js:

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { Quasar } from 'quasar'
import App from './App.vue'

import 'quasar/dist/quasar.css'
import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/material-icons-outlined/material-icons-outlined.css'
import '@quasar/extras/material-icons-round/material-icons-round.css'
import '@quasar/extras/material-icons-sharp/material-icons-sharp.css'
import '@quasar/extras/material-symbols-outlined/material-symbols-outlined.css'
import '@quasar/extras/bootstrap-icons/bootstrap-icons.css'

const app = createApp(App)

app.use(createPinia()).use(Quasar, {
  plugins: {}
})

app.mount('#app')

Я вставляю это в мой шаблон django header.html:

{% extends "base.html" %}
{% load vue_utils %}


{% block content %}

<div id="app"></div>
{% endblock %}

{% block inline_javascript %}
  <script type="module" crossorigin src="{% vue_bundle_url 'main' %}"></script>
{% endblock inline_javascript %}

Это мой компонент vue - App.vue:

<template>
  <q-layout view="hHh lpR fFf">

    <q-header elevated class="bg-primary text-white" height-hint="98">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />

        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
          </q-avatar>
          Title
        </q-toolbar-title>
      </q-toolbar>

      <q-tabs align="left">
        <q-route-tab to="/page1" label="Page One" />
        <q-route-tab to="/page2" label="Page Two" />
        <q-route-tab to="/page3" label="Page Three" />
      </q-tabs>
    </q-header>

    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" behavior="desktop" elevated>
      <!-- drawer content -->
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

  </q-layout>
</template>

<script>
import { ref } from 'vue'
console.log("HERE")
export default {
  setup () {
    const leftDrawerOpen = ref(false)

    return {
      leftDrawerOpen,
      toggleLeftDrawer () {
        leftDrawerOpen.value = !leftDrawerOpen.value
      }
    }
  }
}
</script>

Виды при передаче и рендеринге шаблона django: enter image description here

Краткое описание проблемы: В режиме разработки файлы шрифтов WOFF загружаются некорректно. В производственном режиме файлы WOFF загружаются корректно при обслуживании из /static/vue/, но в режиме разработки относительные URL-адреса в material-icons.css указывают на неправильные пути. Вы используете базовый конфиг в Vite для установки /static/vue/ в продакшене, но тот же подход не работает в разработке. Основные шаги для решения проблемы Проверьте относительные пути в material-icons.css: Правило @font-face в material-icons.css использует относительные пути для расположения файлов шрифтов:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('./web-font/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2') format('woff2'), 
       url('./web-font/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff') format('woff');
}

Путь ./web-font/ является относительным к местоположению файла material-icons.css. Это работает в производстве, потому что шрифты обслуживаются из известного места в /static/vue/, но не работает в разработке, когда активы обслуживаются Vite из другого места.

Make Font Path Absolute in CSS: Чтобы решить эту проблему, вы можете изменить относительные пути на абсолютные. Вместо ./web-font/ следует использовать полный путь, который будет согласован как в среде разработки, так и в среде производства. Например, в файле main.css или в определенном CSS-файле, который импортирует material-icons.css, можно использовать абсолютный URL, который работает в обоих окружениях:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/static/vue/web-font/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2') format('woff2'),
       url('/static/vue/web-font/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff') format('woff');
}

Это гарантирует, что как в разработке (где Vite обслуживает активы через http://127.0.0.1:5173), так и в производстве (где они обслуживаются через путь /static/vue/ в Django), URL будут корректными.

Конфигурация Vite для загрузки активов: В режиме разработки Vite может не разрешить пути к шрифтам должным образом, если вы не укажете базовый URL явно для статических активов, таких как шрифты. Вы можете изменить файл vite.config.js, чтобы настроить базу и правильно обрабатывать статические активы:

// vite.config.js
export default {
  base: '/static/vue/', // This makes sure assets are served correctly in production
  build: {
    rollupOptions: {
      input: {
        main: resolve('./src/main.js'),
        main_header: resolve('./src/main_header.js'),
        reward: resolve('./src/reward.js'),
      },
      output: {
        dir: '../my_project/static/vue/',
        entryFileNames: '[name].js',
      },
    },
  },
  assetsInclude: ['**/*.woff', '**/*.woff2'], // Include font files for Vite
};

Это гарантирует, что Vite правильно обрабатывает файлы шрифтов и генерирует правильные пути.

Убедитесь, что статические файлы скопированы в правильное место: Vite и Django должны иметь одну и ту же структуру статических папок. После создания приложения Vue убедитесь, что вывод Vite помещен в статическую директорию Django, а шрифты находятся в нужном месте в каталоге /static/vue/.

При необходимости используйте скрипт сборки или процесс копирования, чтобы убедиться, что шрифты доступны в папке Django static после выполнения npm run build.

Тестирование и отладка: После внесения этих изменений очистите кэш браузера, чтобы убедиться, что браузер не загружает старые CSS- или JS-файлы. Также проверьте сетевую вкладку браузера, чтобы убедиться, что файлы WOFF запрашиваются с правильного URL как в разработке, так и в производстве.

Заключение: Обновите пути к шрифтам в material-icons.css, чтобы они были абсолютными (/static/vue/web-font/), что будет работать как в разработке, так и в производстве. Настройте Vite для работы с URL-адресами активов, установив опцию base и включив файлы шрифтов в сборку. Убедитесь, что шрифты скопированы в правильное место в папке static в процессе сборки. Это должно решить проблемы с загрузкой файлов WOFF в обоих окружениях.

Вернуться на верх