node-sass 替换 dart-sass

为什么要将 node-sass 替换成 dart-sass ?

Sass 官方已停止 node-sass 的更新，转而维护 dart-sass 了，因为 node-sass 是通过调用 LibSass 而实现的，而 LibSass 有些依赖在某些环境是缺失的，需要去环境中添加依赖，还有一些需要的二进制文件国内访问不到，导致文件下载不下来，所以 node-sass 经常会有下载问题存在。具体可以查看官方公告: sass-lang.com/blog/libsas…。

删除 node-sass

- "node-sass": "^4.9.0"

替换 dart-sass

由于 node-sass 和 dart-sass 的配置一样，所以只需删除 node-sass 后重启项目即可。

npm install --save-dev sass
# 重启项目
npm run dev

重新启动项目发现报错

因为 Sass 新版本不支持直接使用 “ / ” 作为除法，因为会混淆一些 Sass 的独有语法，所以需要使用 calc 函数来计算，或者使用 Sass 提供的 math.div 函数 ，再或者使用低版本的 Sass。 如果项目中有大量类似问题需要解决怎么办？Sass 官方提供 sass-migrator 进行匹配替换。

sass-migrator

安装 sass-migrator

npm install -g sass-migrator

使用 sass-migrator

# 1. 进入需要替换的项目文件夹，记得绕过 node_modules
# 2. 执行 sass-migrator 进行替换
sass-migrator division **/*.scss
# ！这里 division 是指替换的类型，**/*.scss 是文件路径
# 更多替换类型请查看官方文档: https://sass-lang.com/documentation/cli/migrator

替换完成后重新启动

启动后发现 /deep/ 语法也不支持，全局替换成 ::v-deep ，替换后报错也消失了，至此升级完成。