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

Question

I started using Vue using the Vue CLI template. In that template you create a file called 'vue.config.js' to define some settings. More to find here: https://cli.vuejs.org/guide/css.html#css-modules

I had a settings for an global css/sass file so all my components could access the variables (the file only contains 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";
                `
            }
        }
    }
};

Now I am working on another project. This time I use laravel and vue in one app. Laravel makes Vue works with webpack and webpack.mix.js.

Now here is where I get stuck. I can't create a config so the global css file with the variables can be recognises in the vue "one file components" I can't find any solution on the internet or my own experience to make this work.

Anyone experience with this?

Answer 1

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

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

并安装依赖项sass-resources-loader

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

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

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

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