2022-10-20 解决vue项目中不能使用scss的问题:sass-loader的安装

问题描述

在App.vue中使用

<style lang="scss" scoped>
ul{
...
  li{
...
  }
}
</style>

scss时,报错如下:

Failed to resolve loader: sass-loader

没有安装Sass但是却引用了Sass语法

安装sass-loader的坑

安装命令:

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

报错如下:

npm WARN deprecated tar@2.2.2: This version of tar is no longer supported,

然后,搜这个错误的解决方案

卸载node和npm和重装一个低版本,下载低版本的node-sass:npm i node-sass@xxx -D
仍报错

找出原因:版本冲突

这篇博文很有启发性:
解决vue中使用scss时，依赖node-sass和sass-loader的版本问题
这篇博文解决了我的问题:
解决sass-loader和node-sass版本冲突问题
解决方法是:不要安装node-sass，安装sass就可以了
命令:

npm uninstall sass-loader node-sass
npm install sass-loader@8.0.2 sass@1.26.5  --save-dev

总结

使用低版本的思路可能是正确的,然后也要注意开发依赖问题,不要盲目更新最新版,不然解决起来很浪费时间,解决方法是多样的,找到适用自己的问题的就行
最后是一些node,node-sass和sass-loader版本组合的参考:
node\node-sass\sass-loader对应版本

vue项目中成功使用scss写样式

App.vue

<style lang="scss" scoped>
ul{
  $num:200px;
  width: $num*4;
  height: $num*4;
  background: black;
  li{
	  width: $num;
	  height: $num;
	  background: red;
  }
}
</style>