使用webpack自动引入sass全局变量

当项目越来越大的时候，便于后期维护和代码的编写效率  提取css是必须的  但是每个页面都又可能用到全局声明的 scss变量  每个页面引入？ 显然不是程序猿的作风，  
于是 sass-resources-loader 闪亮登场  
 
第一步：  cnpm install sass-resources-loader --D  
第二步： 找到vue.config.js , 找到chainWebpack选项
第三步： 

// 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({
          // Provide path to the file with resources
          resources: './path/to/resources.scss',
 
          // Or array of paths
          resources: ['./path/to/vars.scss', './path/to/mixins.scss']
        })
        .end()
    })
  }
}