Стили Vuetify2 не работают должным образом с Django

Я пытаюсь добавить vue + vuex + vuetify framework в мой django проект. Я установил node.js и yarn, затем прописал команды - yarn global add @vue/cli и vue create client в корневом каталоге проекта, и изменил файлы конфигурации:


package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "dev": "vue-cli-service build --dest=../../static/builds/dev --mode=development --watch"
  },
  "dependencies": {
    "axios": "^0.21.4",
    "copy-to-clipboard": "^3.3.1",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-modal-dialogs": "^3.0.0",
    "vue-router": "^3.2.0",
    "vuedraggable": "^2.24.3",
    "vuetify": "2.6.5",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.4.2",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  }
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
import ru from 'vuetify/es5/locale/ru'
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

export default new Vuetify({
  lang: {
    locales: {ru},
    current: 'ru'
  }
});

затем я выполнил команду yarn dev и вставил собранные файлы в существующий html из static

    <script defer="defer" src="{% static 'builds/dev/js/app.js'%}"></script>
    <div class="tab-pane fade" id="structure-tab-content" role="tabpanel" aria-labelledby="structure-tab">
        <div id="app"></div>
    </div>

Но vuetify собран неправильно, теги работают, а стили нет, что бы я ни делал пример как должно быть как вы можете видеть, нет ни иконок, ни стилей

пробовал все из этой темы значок vuetify не отображается но ничего не работает

Какой пакет вы установили? Если вы установили material-design-icons-iconfont

Вы должны добавить следующие стили в файл main.js:

import 'material-design-icons-iconfont/dist/material-design-icons.css';

Если вы импортируете @mdi/font/css/materialdesignicons.css как в ваших комментариях:

Вам необходимо установить пакет: @mdi/font

Обе эти строки импортируют CSS-файлы для иконок Material Design, но из разных пакетов.

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