vue-vue-cli3 sass全局变量配置

如果每次都需要手动引入，太麻烦了， 而且也不符合DRY原则

我们用sass-resources-loader来实现，然后具体怎么做看文档， 搜索下vue cli-3就可以了， 我先列出当前可行的代码

// 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()
    })
  }
}

更多看

https://github.com/shakacode/sass-resources-loader

这里有一个非常 非常重要的地方
vue.config.js 不是public里面的vue.config.js 而是 package.json 旁边的 vue.config.js (如果没有就新建)

不然你在public里面设置半天，发现vue cli3 sass一直没生效 然后去反复检查路径~~ 蛋蛋都疼。

参考链接

https://github.com/shakacode/sass-resources-loader