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

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

目录


前言


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,有遇到该问题的兄弟可留言,博主目前这么解决的

目录
相关文章
|
21天前
|
前端开发 开发者
stylus、sass、less区别, Sass 、LESS是什么
【4月更文挑战第1天】stylus、sass、less区别, Sass 、LESS是什么
9 0
|
3月前
|
JSON 资源调度 JavaScript
如何在 Node.js 项目中使用 Prettier 进行代码格式化
如何在 Node.js 项目中使用 Prettier 进行代码格式化
86 0
|
3月前
|
前端开发 开发者 Ruby
Sass、LESS区别是什么?大家为什么要使用他们?
Sass(Syntactically Awesome Style Sheets)和LESS(Leaner CSS)是两种流行的CSS预处理器,它们在原生CSS的基础上提供了一些额外的功能和语法。
88 1
|
8月前
|
Dart 前端开发 JavaScript
Sass dart-sass 与 node-sass 的区别与选择
Sass dart-sass 与 node-sass 的区别与选择
231 0
|
8月前
|
Dart JavaScript
项目中安装并使用scss.(不需要安装node-sass)
项目中安装并使用scss.(不需要安装node-sass)
244 0
|
9月前
|
资源调度 Dart JavaScript
vue项目:Node Sass to Dart Sass
vue项目:Node Sass to Dart Sass
80 0
|
10月前
|
存储 JavaScript 前端开发
Node.js 与 TypeScript
Node.js 与 TypeScript
|
11月前
4.Node.js 使用 Babel 搭建ES6开发环境
4.Node.js 使用 Babel 搭建ES6开发环境
59 0
|
JavaScript
Node.js:npm的语义版本生成器semver.js
Node.js:npm的语义版本生成器semver.js
61 0
|
Dart
Node sass 切换成Dart Sass
参照:链接 注意:安装了sass后,sass-laoder的版本不能太高,否则会报 Syntax Error: TypeError: this.getOptions is not a function 我的版本对应关系如下: “sass”: “^1.49.9”, “sass-loader”: “^7.1.0”,
173 0