Vue中解决无需一一引入scss公共样式文件（sass-resources-loader）

sass-resources-loader

在vue中使用sass中的变量、混合等语法封装成的公共样式文件，在app.vue中引入样式文件后，发现不能全局使用，还是需要在组件中一一引入。
利用sass-resources-loader解决。

• 安装 sass-resources-loader

npm i sass-resources-loader

• 在vue.config.js配置

module.exports = {
     
    chainWebpack: config => {
     
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
     
        item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
     
            // 公共样式文件地址
            resources: './path/to/vars.scss',

            // 地址也可以是数组
            // resources: ['./path/to/vars.scss', './path/to/mixins.scss', './path/to/functions.scss']
            })
            .end()
        })
    }
};

详细配置参考：https://github.com/shakacode/sass-resources-loader