laravel - 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 文件的设置，所以我的所有组件都可以访问变量(该文件只包含变量)。

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
})