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

Step1、 安装 sass-resources-loader：

npm install sass-resources-loader

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

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文件中