使用CLI(v3.7.0)创建新项目时,可以选择在dart-sass
或node-sass
编译器之间进行选择。
它们之间的比较如何,比Vue docs中声明的更具体?
Sass演奏技巧
请注意,使用Dart Sass时,同步编译的时间是Dart Sass的两倍。 默认情况下,与异步编译一样快,原因是 异步回调。为了避免这种开销,您可以使用光纤 包以从同步代码路径调用异步导入程序。 为此,只需将光纤安装为项目依赖项即可:
npm install -D fibers
还请注意,由于它是本机模块, 操作系统和内部版本可能存在兼容性问题 环境。在这种情况下,请运行
npm uninstall -D fibers
进行修复 问题。
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
答案 0 :(得分:16)
24/01/2021
正如官方所写 node-sass github doc,node-sass 已弃用。
<块引用>警告:LibSass 和Node Sass 已弃用。虽然他们将无限期地继续接收维护版本,但没有计划添加额外的功能或与任何新的 CSS 或 Sass 功能的兼容性。仍在使用它的项目应该转移到 Dart Sass。
所以我想如果您计划长期或保持最新状态,最好选择 dart sass。
答案 1 :(得分:6)
node-sass可能比dart-sass更快,但是截至撰写本文时,dart-sass是唯一实现@use
规则的库,强烈建议在@import
上使用它。根据官方sass-lang website的说法:
@import
有什么问题?@import
规则存在许多严重问题:
@import
可使全局访问所有变量,混合和功能。这使人们(或工具)很难说出定义了什么。由于所有内容都是全局的,因此必须在库的所有成员之前添加前缀,以免发生命名冲突。
@extend
规则也是全局规则,这使得很难预测将扩展哪些样式规则。每个样式表都会被执行,并且每次
@import
被执行时都会发出CSS,这会增加编译时间并产生肿的输出。无法定义下游样式表无法访问的私有成员或占位符选择器。
新的模块系统和
@use
规则解决了所有这些问题。
此外,@import
将在未来几年内成为gradually phased out,并最终完全从语言中删除。
为了跟上Sass的最佳实践,您现在应该使用dart-sass(即sass)。
答案 2 :(得分:3)
根据官方sass-lang website:
Dart Sass是Sass的主要实现,这意味着它可以 其他任何实现之前的新功能。快速,容易 安装后,它可以编译为纯JavaScript ,从而易于 集成到现代Web开发工作流程中。
如果在Dart-VM内运行Dart-Sass,速度会很快,但它说它可以编译为纯JS 。 dart-sass
的npmjs软件包只是一个编译版本,比node-sass
或native dart-sass
慢。
如果您正在寻找测量值,我建议您阅读here,其中有示例和不同的数字:
这是Dart Sass以 提前编译的本机代码,结果令人鼓舞。 它远远低于小型文件的100ms阈值,与标准文件相当 使用SassC进行大多数测试。 SassC仍然领导着许多测试 扩展(尽管仅略有扩展),并且针对我们的实际测试之一 案例(尽管Dart Sass在其他案例中处于领先地位)。两种实现 可以完全形容为总体上具有相同的性能。
Node上的Dart Sass仍然比Dart VM上的速度慢很多, 而相对的减速则变得更加明显 代码变得更快。解决方案,例如[嵌入式 协议] []或[WebAssembly支持] []越来越多 重要。
我个人使用dart-sass
npmjs软件包而不是node-sass
(它是本机js
库的C
包装器)的个人经验是,dart-sass
非常(对我来说至少是50倍,因为我有很多大型主题文件)比node-sass
慢。