如何让 vuetify 样式在 laravel 8 中工作？

Question

我正在做一个新项目，我需要在 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.

Answer 1

终于解决了，就是它调用了组件，但是要让样式正常工作，一切都必须封装在 v-app 中

如何让 vuetify 样式在 laravel 8 中工作？

How to get vuetify styles to work in laravel 8?

css

styles

vue.js

vuetify.js

laravel-8