【发布时间】：2021-05-29 06:01:31
【问题描述】：
我正在做一个新项目，我需要使用 laravel 8 中的 vuetify 框架，拉取以下命令来安装库：
composer require laravel/ui
php artisan ui vue
npm i
npm i vuetify
npm i sass sass-loader deepmerge -D
我按照一些文档在 laravel 8 中安装 vuetify，接下来我展示我的 package.json：
"devDependencies": {
"axios": "^0.21",
"bootstrap": "^4.0.0",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.2.2",
"deepmerge": "^4.2.2",
"jquery": "^3.2",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"postcss": "^8.1.14",
"resolve-url-loader": "^2.3.1",
"sass": "^1.32.8",
"sass-loader": "^8.0.2",
"vue": "^2.5.17",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vue-router": "^3.5.1",
"vuetify": "^2.4.5",
"vuex": "^3.6.2"
}
app.scss 和 app.js 文件：
/* app.scss */
@import url('https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css');
@import '~vuetify/dist/vuetify.min.css';
@import 'variables';
/* app.js */
require('./bootstrap');
window.Vue = require('vue').default;
import router from '@r/routes';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify)
import RenderVue from '@/RenderVue';
new Vue({
router,
vuetify: new Vuetify(),
render: (h) => h(RenderVue)
}).$mount('#app');
在所有这些安装之后，我尝试将一个类型为success的v-alert和一个在vuetify文档中的卡片作为示例，最后它呈现如下：
我们可以看到安装了vuetify，因为它可以识别组件，但是不识别样式，为什么会这样呢？ 在 app.css 文件中，似乎生成了 vuetify 样式。 文件 app.css：
/*!
* Vuetify v2.4.5
* Forged by John Leider
* Released under the MIT License.
【问题讨论】：
标签： css vue.js styles vuetify.js laravel-8