Vue CLI CSS预处理程序选项:dart-sass VS节点-sass?

时间:2019-05-15 13:19:18

标签: css vue.js webpack sass vue-cli-3

使用CLI(v3.7.0)创建新项目时,可以选择在dart-sassnode-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

3 个答案:

答案 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-sassnative 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慢。