node-sass 迁移至 dart-sass 踩坑实录
内容提要
更新项目依赖，弃用已停止维护的node-sass，改用dart-sass以简化安装和提高兼容性。将node.js升级至14版本，保持webpack和sass-loader版本不变，解决sass语法错误并替换不支持的深度选择器。最终更新node、vue-loader和sass版本，确保项目正常运行。
关键要点
-
更新项目依赖，弃用已停止维护的node-sass，改用dart-sass以简化安装和提高兼容性。
-
将node.js升级至14版本，保持webpack和sass-loader版本不变。
-
node-sass在windows下安装麻烦，需要同时安装python2和Microsoft Visual C++。
-
node-sass的安装成功率在特定网络环境下不高。
-
webpack 3支持的最高sass-loader版本为7，若sass-loader@^7支持dart-sass，则不需更新webpack。
-
最终决定使用sass@^1.22.12版本，更新webpack配置以支持dart-sass。
-
批量替换不支持的深度选择器/deep/为::v-deep。
-
修复项目中的sass语法错误，确保dart-sass能够正常编译。
-
更新vue-loader至15版本以支持::v-deep语法，vue-loader v16仅支持Vue 3。
-
最终更新情况：node@^12升级至node@^14，vue-loader@^14升级至vue-loader@^15，node-sass@^4替换为sass@^1.22.12，其余依赖版本维持不变。
延伸问答
为什么要将node-sass替换为dart-sass？
因为node-sass已停止维护，而dart-sass是官方推荐的继任者，能够简化安装并提高兼容性。
在迁移过程中遇到了哪些主要问题？
主要问题包括深度选择器不支持、sass语法错误以及vue-loader版本兼容性问题。
如何解决sass语法错误？
需要根据编译时的报错手动修复不规范的写法，例如多打冒号或未指定数字的选择器。
更新vue-loader的原因是什么？
更新vue-loader至15版本是为了支持::v-deep语法，而vue-loader v16仅支持Vue 3。
如何批量替换不支持的深度选择器？
可以使用sed命令批量将/deep/替换为::v-deep。
更新项目依赖后，node.js的版本如何变化？
node.js版本从^12升级至^14。
