前端项目里将node-sass包迁移至sass包

起因

最近接手公司从外部采购的一个项目。这个项目是用vue-admin-template改的，项目里sass编译用的是node-sass。众所周知，node-sass是一个极其难用的npm包。因为该包和node的版本相关，基本上依赖这个包的项目，初始化太麻烦。

因为最近刚换电脑，首次npm i该项目时，总是报错。网络上大部分指向的解决方法是换node版本。哎，不想换。所以继续折腾。最后发现可以用sass包替换node-sass。抱着试一试的态度，试了一下。确实有用，故记录一下。

sass和node-sass

node-sass与dart-sass（现在已经改名sass）都是用来将sass编译成css的工具，都依赖于sass-loader
1、node-sass与node.js版本相互关联，版本必须对应
2、dart-sass已经更名为sass
3、dart-sass不支持/deep/语法，要改成为::v-deep
4、node-sass是用node来自动编译sass，而dart-sass是用dart VM编译，dart-sass需要保存后才会生效
5、dart-sass 性能更好，不存在依赖二进制文件即可完成安装，并且兼容sass和cssx新特性，而node-sass依赖node版本

升级步骤

1、npm uninstall node-sass
2、npm install sass@1.32.6
3、npm install sass-loader@10.2.1
4、将项目所有用到 /deep/ 的写法，替换为 ::v-deep

注意你的webpack版本，sass-loader v11以后需要webpack v5才能兼容，我们是webpack4，所以将sass-loader降级为v10

错误代码 ERR_OSSL_EVP_UNSUPPORTED 的处理

如果按上面的步骤处理了，还是报错。可能是node版本太高了，导致和以前的openssl版本不兼容。将package.json里script命令的脚本内容vue-cli-service serve替换下面即可

"SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve"

参考链接

vue-admin-template项目将node-sass迁移至dart-sass踩坑记录
错误代码 ERR_OSSL_EVP_UNSUPPORTED