Laravel 混合编译 vuetify styles.sass 到空 css 文件

Posted 2023-02-22

【中文标题】Laravel 混合编译 vuetify styles.sass 到空 css 文件

【英文标题】：Laravel mix compiling vuetify styles.sass to empty css file

【发布时间】：2019-11-30 21:36:43

【问题描述】：

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

根据文档（），首先我跑了：

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

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

@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 */

【参考方案1】：

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

github.com/nekosaur/laravel-vuetify

【参考方案2】：

经过许多问题，我在 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(),
    ]
;

【讨论】：

我已经搜索了整整 2 天的解决方案，这似乎是唯一适用于我的项目的解决方案！非常感谢！

【参考方案3】：

你解决过这个问题吗？我也遇到了同样的情况，但 Veutify 是生产版本 2（现已退出测试版）。

【讨论】：

不.. 还是一样

这项工作 - 使用 vuetify-loader 的示例 laravel 项目：github.com/nekosaur/laravel-vuetify

【参考方案4】：

这个解决方案对我来说是正确的，但你必须有 sass-loader 7，8 不兼容。