Vue项目引入全局scss变量引用失败_module.scss无法使用scss文件的变量

很多博客都是讲的很混乱，配置也没有说清楚，所以在此记录一下，方便自己学习

首先可以去看VueCLi的官网，地址是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
1
2
3
4
5
6
7
8

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

报错如下：

配置vue.config.js-方法1

module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        prependData : `@import "~@/assets/main.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        prependData : `@import "~@/assets/main.scss";`
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

**注意：**这里的把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',
          })
      })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

以上两种方法我都测试过了，现阶段可以使用，如果以后sass预处理器又出现新的语法，那可能还是需要取sass官网查看，希望能够帮到大家