Vue3安装最新版sass-loader node-sass报错解决方法

最近在升级前端项目框架，之前的前端框架是Vue2.0构建的，最近打算全部都升级到最新版的，nodejs升级到了目前最新版v16.13.2，Vue ^3.0.0，VueCLI~4.5.0，然后在升级SASS预处理器时执行安装命令报错了

执行​​vue-loder​​官网的安装命令npm install -D sass-loader node-sass报错如下：

大概意思是依赖包冲突了，VueCLI4版本用的webpack版本依赖和sass-loader用的webpack依赖冲突，需要更新依赖或者降级sass-loader版本。

然后我降级了sass-loader本版安装可以安装

npm install -D sass-loader@^10 node-sass

 

接着我又看了下​​Vue CLI​​​的官网看到了安装命令，使用这个命令安装，还是报错，根据 ​​node-sass​​​ 官网的说法，不同的 node.js 版本需要安装不同的 ​​node-sass​​​ 版本，并且 ​​node-sass​​​ 已经废弃，推荐使用 Dart Sass 代替，Dart Sass 在 npm 中的包名为 ​​sass​​ .

npm install -D sass-loader sass

 

 然后​​Vue CLI​​的官网的中文页面和英文页面内容居然不一样，英文页面、俄语页面提供这个问题的解决方法，而中文页面没有，所以下次看官网内容时，可以多看看不同语言的版本。

最后执行降版本安装的命令，安装成功

npm install -D sass-loader@^10 sass

 

参考文献：

1、​​Working with CSS | Vue CLI​​ 

2、​​使用预处理器 | Vue Loader​​

3、​​升级 node16 后 vue 项目中 sass 报错踩坑记录 - 简书​​