vue配置全局使用scss的变量和函数

一、安装sass-resources-loader

npm i sass-resources-loader -D

二、在vue.config.js中添加配置

mixin.scss为需要全局访问的装有变量和函数的文件

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: ['./src/assets/css/mixin.scss']
          })
          .end()
    })
  }
}

三、使用及效果图