Vue项目引入全局scss变量引用失败

首先可以去看VueCLi的官网，地址是创建一个项目 | Vue CLI️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/guide/creating-a-project.html

1.安装预处理器

# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

 但是你会发现，只是看完文档，然后你去操作，还是报错：
官方文档是这样写的，我就不贴这部分代码了，因为还是会报错

 

 

配置vue.config.js-方法1

 

**注意：**这里的把additionalData属性换成了prependData ，不然会出现版本问题

在使用最新版本的sass-loader(version>=8.0.0)的时候 additionalData 这个配置已经不再支持，这里是本次更新的issus(https://github.com/webpack-contrib/sass-loader/issues/760 )，而是使用 prependData 代替，所以，配置如上
 

配置vue.config.js-方法2

vue.config.js文件

module.exports = {
  chainWebpack: (chain) => {
      const oneofsMap =  chain.module.rule('scss').oneOfs.store
      oneofsMap.forEach(item=>{
          item
          .use('sass-resources-loader')
          .loader('sass-resources-loader')
          .options({
            resources: './node_modules/element-plus/dist/main.scss',
          })
      })
  }
}

现阶段可以使用，如果以后sass预处理器又出现新的语法，那可能还是需要取sass官网查看