Laravel Vuetify - 将所有 CSS 内联

Question

我正在尝试在我的 laravel 项目中使用 Vue。 并为该项目导入 vuetify。

但它会将所有 css 内联附加到项目中。

我的 app.js 是 avobe：

window.Vue = require('vue');

//import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import {store} from './store/store'

import vuetify from './plugins/vuetify' // path to vuetify export
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader



import Master from './Master'
import router from './router'

Vue.use(VueRouter)


Vue.config.productionTip = false;
router.beforeEach((to, from, next) => {
    if(to.matched.some(record => record.meta.requiresAuth)){
        if(store.getters.loggedIn){
            next()
        }else{
            next({name: 'login'})
        }
    }else{
        if(store.getters.loggedIn){
            next({name: 'dashboard'})
        }else{
            next()
        }
    }

})
// use the plugin

const app = new Vue({
    el: '#app',
    router: router,
    store: store,
    vuetify,
    components: {Master},
    template: "<Master />"
});

我的 webpack.mix.js：

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

以下是代码如何自行编译：

如何在“blabla.css”文件中使用 vuetify 代码？

Answer 1

在您的 app.js 中删除您的 vuetify.min.css

并像这样在你的 app.scss 中移动它

@import '~vuetify/dist/vuetify.min.css';