Question

我正在尝试使用laravel mix编译vuetify 2.0.0-beta.9 SASS。 styles.sass的输出是一个空的css文件。我该如何解决？

根据文档（），我首先运行：

$ npm install sass sass-loader fibers deepmerge --dev

然后在main.scss中创建了一个resources/sass文件。其中包含以下内容：

@import '~vuetify/src/styles/main.sass';
@import '~vuetify/src/styles/styles.sass';

$body-font-family: 'Amiri', serif;

这会产生一个看起来不完整的css文件，因为如果我只是链接CDN或从~vuetify/dist/vuetify.css导入一个已编译的CDN，该站点的样式就会变得疯狂而可以正常工作

我需要自己编译它，而不仅仅是从~vuetify/dist/vuetify.css导入，因为我想更改$body-font-family变量。

为了测试，我首先评论了styles.sass，

@import '~vuetify/src/styles/main.sass';
//@import '~vuetify/src/styles/styles.sass';

//$body-font-family: 'Amiri', serif;

这确认main.sass正在被编译。所以接下来，我尝试了：

//@import '~vuetify/src/styles/main.sass';
@import '~vuetify/src/styles/styles.sass';

//$body-font-family: 'Amiri', serif;

仅输出以下内容的文件：

/** Ripples */

/** Elements */

Answer 1

您曾经解决吗？我处于相同的情况，但是Veutify是生产版本2（现在是beta版）。

Answer 2

已解决：davejm的示例项目使用vuetify-loader为我解决了！谢谢！

github.com/nekosaur/laravel-vuetify

Answer 3

经过很多问题，我在 Laravel 8 上解决了这个问题。

// Dependencies
{
        "laravel-mix": "^6.0.6",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.10",
        "vuetify": "^2.4.3",
        "vuetify-loader": "^1.7.1",
}

// webpack.mix.js
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
Mix.listen('configReady', webpackConfig => {
    // scss
    const scssRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.scss$/)
    );
    scssRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss";'
    })

    // sass
    const sassRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.sass$/)
    );

    sassRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss"'
    })
})
mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/gift.js', 'public/js')
    .vue()
    .sass('resources/sass/pages/home.scss', 'public/css')
    .sass('resources/sass/pages/gift.scss', 'public/css')
    .webpackConfig(Object.assign(webpack))
    .copyDirectory('resources/images/', 'public/images');

if (mix.inProduction()) {
    mix.version();
};

// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
    plugins: [
        new VuetifyLoaderPlugin(),
    ]
};

Answer 4

此解决方案对我来说是正确的，但是您必须具有不兼容的sass-loader 7、8。

Laravel将vuetify styles.sass混合编译为空的css文件

4 个答案: