GlobalVueStyles：不适用于 vue 组件中的全局 Sass答案

【问题标题】：GlobalVueStyles: not working for global Sass in vue componentsGlobalVueStyles：不适用于 vue 组件中的全局 Sass
【发布时间】：2021-03-18 03:08:52
【问题描述】：

我正在尝试将全局 sass 变量文件加载到我的 Vue 样式标签中。如果我理解 globalVueStyles 正确，这应该指示一个文件包含在每个组件样式中。但是当我设置它时，它似乎什么也没做，当我运行 npm run dev 时，我得到一个未定义的变量错误。

这是我的 laravel 混合代码：

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/main.scss', 'public/css')
    .options({
        extractVueStyles: true,
        globalVueStyles: 'resources/sass/utils/_variables.scss',
    })
    .version()

在这样做之后，我认为我应该可以通过这样做来访问我的 .vue 文件中的变量：

<template>
    <h1>Example Component hi test</h1>
</template>

<script>
export default {

}
</script>
    
<style lang="scss">
    h1 {
        font-size: 50px;
        color: $blue;
    }
</style>

这是我得到的错误：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
4 │    color: $blue;
  │           ^^^^^
  ╵
  resources/js/components/HelloWorld.vue 4:11  root stylesheet

我确定我遗漏了一些东西，但我们将不胜感激。

【问题讨论】：

标签： laravel webpack laravel-mix

【解决方案1】：

我被https://github.com/JeffreyWay/laravel-mix/issues/2896;引导回答

他们似乎升级了文档的语法，可以在这里找到： https://github.com/JeffreyWay/laravel-mix/blob/467f0c9b01b7da71c519619ba8b310422321e0d6/UPGRADE.md#vue-configuration

【讨论】：

【解决方案2】：

当我尝试您的解决方案时，它不起作用。这是我设法解决这个问题的方法，使用这个新的/更改的属性附加数据，在以前的版本中，这个属性是数据或 prependData。

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "sass-loader",
                        options: {
                            additionalData: `@import "@/_variables.scss";
                            @import "@/_mixins.scss";
                            @import "@/_extends.scss";
                            @import "@/_general.scss";`
                        },
                    },
                ],
            }
        ]
    },
    resolve: {
        alias: {
            '@': path.resolve('resources/sass'),
            '~': path.resolve('/resources/js'),
            'Vue': 'vue/dist/vue.esm-bundler.js',
        }
    },
    output: {
        chunkFilename: '[name].js?id=[chunkhash]',
    },
});

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


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

请注意，路径“resources/scss”的别名是“@”。我希望这可以节省一些时间:)

【讨论】：