vue项目全局自动引如公用scss文件

当项目越来越大的时候，便于后期维护和代码的编写效率  提取css是必须的  但是每个页面都又可能用到全局声明的 scss变量  每个页面引入？ 显然不是程序猿的作风，  
于是 sass-resources-loader 闪亮登场  

使用步骤和把大象关进冰箱是一样的
 
找到大象，.  cnpm install sass-resources-loader --D  
打开冰箱： 找到vue.config.js , 找到chainWebpack选项
关进冰箱： 

   //   全局的scss文件 (包括组件中 lang='scss' 的style) 自动引入公共的scss文件

    chainWebpack: config => {

        // 公共scss文件集合

        const resources = ['xxx.scss","xxx2.scss]

        const oneOfsMap = config.module.rule('scss').oneOfs.store

        oneOfsMap.forEach(item => {

            item

                .use('sass-resources-loader')

                .loader('sass-resources-loader')

                .options({

                    //   resources: Array<string>

                    // resources: [path.resolve(__dirname, './src/assets/styles/vars.scss')],

                    resources: resources.map(p => path.resolve(__dirname, p))

                })

                .end()

        })

    }