dart-sass与node-sass的区别以及使用dart-sass可能会出现的问题

🐱 个人主页：不叫猫先生
🙋‍♂️ 作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫系列专栏：vue3从入门到精通、TypeScript从入门到实践
📢 资料领取：前端进阶资料以及文中源码可以找我免费领取
🔥 前端学习交流：博主建立了一个前端交流群，汇集了各路大神，互相交流学习，期待你的加入！(文末有我wx或者直接私信)

前言

2020年10月27日，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。如果在vue脚手架搭建的项目中需要使用sass，建议初始化时勾选sass配置，自行安装，选择默认的就是dart-sass。dart-sass替代node-sass根本原因：node-sass无法下载特定版本的二进制依赖文件（博主没有深入研究）

dart-sass使用前需要注意几点：

• dart-sass 和 node-sass都是用来将sass编译成css的工具，所以都依赖sass-loader。但node-sass 与 node.js 版本相关联，这就导致，一旦本地 node.js 升级，就会出现 node-sass 无法工作的情况
• npm 上的 dart-sass 包已被弃用，直接更名为 sass
• dart-sass 不支持/deep/，要改成::v-deep

安装dart-sass

卸载node-sass

yarn remove node-sass

安装dart-sass

yarn add sass -D

dart-sass与node-sass 的区别：

• node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass
• dart-sass 是用 drat VM 来编译 sass
• node-sass是自动编译实时的，dart-sass需要保存后才会生效
• dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass依赖node版本，所以会出很多问题（node-sass:4.14.1，node:14.19.3可以正常使用，mac本node-sass依赖python3，装机默认是python2.7，所以还需要下载python3）

dart-sass优势

• 不存在依赖二进制文件即可完成安装，避免了node-sass因为依赖其他文件而失败
• 允许使用sass和css新特性
• 避免工程其他依赖升级的不兼容node-sass导致报错的问题

dart-sass缺陷

• 性能：由于node-sass使用C++实现的样式预处理器，速度相比于纯Javascript实现Dart Sass要快
• 内存：执行编译过程中，Node Sass的内存占用也比Dart Sass要小很多

常出问题

1. Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

问题截图如下：

主要是在写css中使用/出的错

css语法里面已经添加了/作为分隔符的使用。sass作为css的超集，也会跟进这个改动，所以sass2.0的时候 /就会被弃用。
但是在calc函数里面仍然是有效的，也就是说，我们以后用除法的时候，直接在calc函数里使用，或者除2的时候改成*0.5就没有问题了。本来css就是只在calc支持除法，所以问题不大。
官方给出的解决办法是math.div()方法，当然官方不会让你一个一个修改，给出了批量修改工具。

安装sass-migrator

yarn add -g sass-migrator

批量修改

sass-migrator division **/*.scss

编译之前

margin-right: #{$--tooltip-arrow-size/0.55};

编译之后

margin-right: #{math.div($--tooltip-arrow-size, 0.55)};

2.SassError: expected selector. /deep/

问题截图如下：

在写css中使用/deep/出的错，将/deep/替换成::v-deep即可。

3.SassError: expected identifier

问题截图如下：

错误原因应该是不能直接使用小数，transition:all (1.6*0.5)s，有遇到该问题的兄弟可留言，博主目前这么解决的

4. vue项目中使用的element ui的icon乱码，需要在vue.config.js中加入以下代码

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'),
        sassOptions: {
          // 生效代码
          outputStyle: 'expanded'
        }
      }
    }
  }
 }