vue.config.js 到 (laravel) webpack.mix.js

Question

我通过 Vue CLI 模板开始使用 Vue。在该模板中，您创建一个名为“vue.config.js”的文件来定义一些设置。更多可以在这里找到：https://cli.vuejs.org/guide/css.html#css-modules

我有一个全局 css/sass 文件的设置，因此我的所有组件都可以访问变量（该文件仅包含 vars）。

vue.config.js：

module.exports = {
    // So we can use the template syntages in vue components (correct me if am wrong)
    runtimeCompiler: true,
    // CSS settings
    css: {
        loaderOptions: {
            sass: {
                // Load in global SASS file that we can use in any vue component and any sass file
                data: `
                  @import "@/assets/css/variables.scss";
                `
            }
        }
    }
};

现在我正在做另一个项目。这次我在一个应用程序中使用了 laravel 和 vue。 Laravel 让 Vue 与 webpack 和 webpack.mix.js 一起工作。

现在这是我卡住的地方。我无法创建配置，因此可以在 vue“一个文件组件”中识别带有变量的全局 css 文件我在互联网上找不到任何解决方案或我自己的经验来完成这项工作。

有人有这方面的经验吗？

Answer 1

Laravel mix 有一个快捷方式来“指示要包含在每个组件样式中的文件”（在 option available 中查找 globalVueStyles）。所以只需将以下代码添加到项目根目录下的webpack.mix.js 文件中即可。

mix.options({
    globalVueStyles: `resources/assets/css/variables.scss`
});

并安装依赖sass-resources-loader

npm install --save-dev sass-resources-loader

它仅用作相对路径。此外，文档说此选项仅在启用 extractVueStyles 时有效，但我不需要它。

要更好地控制“vue-loader”，您可以使用未记录的函数mix.override

mix.override(webpackConfig => {
    // iterate and modify webpackConfig.module.rules array
})