Стили 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, но из разных пакетов.