element升级版本后错误sass变量显示错误

由于要引用的组件功能要升级到element的下一个版本才能用，所以的为期半天的sass变量引用错误噩梦开始了
先上报错图片
一直报错，以为是升级了element版本后也要升级sass版本啥的（这是错误的思想），于是一股脑想到sass版本升级那方面去了，折腾了一阵sass版本升级后错误还是照常报，于是返回来看这个错误，明显是sass变量检测不到，所以想到了怎么不在检测不到变量这个问题上解决，所以下面附解决方法

1. 通过 sass-resources-loader 全局注册 Sass 变量npm install --save-dev sass-resources-loader
2. 在build–> utils.js 中的exports.cssLoaders中新增一个函数并修改return中的变量
3. `

 function generateSassResourceLoader () {
    var loaders = [
      cssLoader,
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
// 这里面放的是样式的数组
// generateSassResourceLoader函数中的'../src/assets/libs/element-variables.scss' 是你的scss文件路径和文件名
            path.resolve(__dirname, '../src/assets/libs/element-variables.scss'),
          ]
        }
      }
    ]
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        // sass: generateLoaders('sass', { indentedSyntax: true }),
        // scss: generateLoaders('sass'),
        sass:generateSassResourceLoader('sass'),
        scss:generateSassResourceLoader('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
    }

`
配置完成后重启项目，就可以在项目中直接使用了，而且也可以不在main.js中进行引用
参考链接