踩坑，vue项目中，main.js全局引入scss文件时报错

前言

最近一直在搭建新项目，考虑到项目本身的需求以及后期的维护和版本迭代，于是乎想要全局引入scss文件，经历过多次的尝试和配置，终于把scss文件全局引入成功了，先来比个yeah~（先承认一下自己太菜了，不然也不至于把各种方法都试遍了才配置成功）

正文

先在网上找了一篇不错的教程，比如这个： https://www.jianshu.com/p/1c444b825d34  安装。（只是拿这篇文章举例，并不是说这种配置方式有问题，本人对这篇文章和作者没有任何建议和看法）

npm install node-sass sass-loader --save-dev

或者

npm install sass-loader --save-dev
npm install node-sass --sava-dev

然后按照教程添加scss规则
/build/webpack-base-conf.js文件

module:  {
    rules: [
        {
              test: /.scss$/,
              loaders: ['style', 'css', 'sass']
        }
    ]
}

还有添加下面这种代码的：

rules: {
        test: /.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-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']
            },
          },
        ],
      },

到这儿，自以为差不多了，然后带着非常激动的心情 npm run dev

发现项目报错并没有配置成功

然后在网上搜索报错信息，看到下方截图的解决方案

 （截图来源于https://blog.csdn.net/guojing5721/article/details/80595195）

于是小玲有怀着激动的心情，找到buildwebpack.base.conf.js文件，然后按照下方截图配置：

然后依然报错，小玲沮丧的又多看了几篇其他文章，然后看到了这篇：

（这张图片来源于https://www.cnblogs.com/xjguan/p/11544022.html  ）

虽说和小玲的报错信息不太一样吧，但是好歹是一个类型的，但是重点是箭头指向的红框中的文字。

原来，新版本的vue-cli已经帮我们把sass-loader配置好了，放在util.js里面了

前面我们通过   npm install node-sass sass-loader --save-dev  安装好了scss依赖

并在build文件夹下的webpack.base.conf.js的rules里面添加了如下配置

{

test: /.scss$/,

loaders: ['style', 'css', 'sass']

}

 或者buildwebpack.base.conf.js文件别的配置。现在不需要这样配置。如果这样配置会报错，因为配置重复了。

只需将此配置删除即可，然后小玲再次怀着务必兴奋的心情将刚刚的所有配置全都删除。

然而，项目又给我开了一个无比巨大的玩笑，抛给我了一个这样的错误。

小玲当时整个人就不好了（急需火锅，奶茶补充能量）

但是小玲非常坚强，绝对不能放弃，于是喝了一口水，脱掉外套，又开始查错误

于是发现原来是小玲太厉害了，安装的版本太高了，好吧，那小玲就勉强降低一下身段，把包的版本降低一点吧

原来安装的sass-loader的版本为最新8.3.2，先安装的版本是7.3.1

操作步骤：

 ①先把项目package.json文件中sass-loader版本改为7.3.1

 ②重新安装包： npm install  或者cnpm install

 ③启动项目： npm run dev

功夫不负有心人，奇迹终于出现了

 看到熟悉的绿色，小玲露出了笑脸ヾ(●´∀｀●) 

最后

小玲太菜了，不然也不会安装个sass都这么多波折，不过好歹最后成功啦！

写到最后,也鼓励像小玲一样努力工作和学习的前端小伙伴们，不管遇到任何困难或者问题，都要坚持下去，想办法解决。困难和问题遇到的多了，就没有问题啦，yeah~