vuecli3 使用 sass-resources-loader 引入sass全局变量

Step1、 安装 sass-resources-loader：

1. npm install sass-resources-loader

复制代码

Step2、 vue.config.js中修改设置：

1. module.exports = {    // 其他设置    css: {        loaderOptions: {            sass: {                prependData: `                @import "@/assets/styles/vars.scss";                @import "@/assets/styles/mixins.scss";                @import "@/assets/styles/functions.scss";                `            }        }    },    chainWebpack: config => {        const oneOfsMap = config.module.rule('scss').oneOfs.store        oneOfsMap.forEach(item => {            item                .use('sass-resources-loader')                .loader('sass-resources-loader')                .options({                    // 引入一个全局sass文件                    resources: './src/assets/styles/vars.scss',                    // 引入多个全局sass文件                    resources: ['./src/assets/styles/vars.scss', './src/assets/styles/mixins.scss', './src/assets/styles/functions.scss']                })                .end()        })    },    // 其他设置}

复制代码

  ！重要提示：
Do not include anything that will be actually rendered in CSS, because it will be added to every imported Sass file.
全局sass文件中不要包罗任何会被编译成css的代码，因为它们会被应用到每一个sass文件中

来源：https://blog.csdn.net/weixin_43642751/article/details/111994910
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！