是使用 Live Sass 编译器（VS Code 扩展）还是通过 npm 安装和运行 Sass 更好？ （+ 提示如何从 node-sass 更改为 dart-sass）

Posted 2023-03-06

【中文标题】是使用 Live Sass 编译器（VS Code 扩展）还是通过 npm 安装和运行 Sass 更好？ （+ 提示如何从 node-sass 更改为 dart-sass）

【英文标题】：Is it better to use the Live Sass Compiler (VS Code extension) or to install and run Sass via npm? (+ tips how to change from node-sass to dart-sass)

【发布时间】：2021-06-16 23:07:52

【问题描述】：

我正在做一个关于高级 CSS 和 Sass 的在线课程，发现它在课程中的显示方式有点过时了。

本课程在依赖项中使用 node-sass，已弃用。一个直接的替代方法是使用 Dart-sass（我会在最后写下我的步骤，也许有人会从中受益:)）

另一种选择是使用 VS Code 扩展“Live Sass Compiler”。看来这个选项很受欢迎。

但是，我想知道这些选项有什么好处和区别。例如。昨天我在扩展时遇到了一些麻烦，然后使用 dart sass 作为依赖项并以这种方式解决了我的问题。也许这是由于我的代码有问题，但它仍然给我留下了这个问题，我认为其他人将来可能会有同样的问题。

---

PS：这是我的第一个问题，如果我做错了不要烤我：D

对于那些对如何将代码从 node-sass 更改为 dart-sass 感兴趣的人，这里是步骤（至少对我来说，这些是我所做的课程中的步骤）：

使用命令行安装 dart sass：npm i -D sass 将您的脚本更改为 node-sass 为 sass（在 package.json 中） 将watch:sass 脚本中的-w 更改为--watch（在package.json 中） 您也可以通过npm uninstall node-sass 摆脱它

【问题讨论】：

欢迎来到 *** 社区！对于刚加入该网站的人来说，您的问题似乎很好。在我看来，目前使用Sass 并不是最好的选择。你会在下面看到我的答案。

【参考方案1】：

如果您想通过“Live Sass Compiler”使用最实际的 Dart SASS 版本，您需要注意版本。最受欢迎的版本多年来不受支持，因此不支持 Dart Sass。

但是有一个支持的 fork，作为 fork，您可以使用相同的设置。

关于 NPM 和 Live Sass 编译器的问题：两者都是 Sass 的 javascript 版本。作为 Javascript 版本，它们的速度不如直接在系统上安装 SASS 快。 Javascript vesion 本身之间的差异并没有那么大。因此，我认为 NPM 和 Live Sass 编译器之间的最佳选择是使用 Live Sass 编译器（分叉版本！），因为它已集成到编辑器中，并且更易于直接从那里使用。

如果您需要更快的解决方案，您确实应该安装原始版本。这并不像听起来那么困难。还有一个 VS Code 扩展，可以直接从 VS Code 轻松使用原始安装的版本。

详细信息：

在您的系统上直接安装 SASS：https://sass-lang.com/install

指定 VS Code 扩展的信息：https://***.com/a/66207572/9268485

【讨论】：

您好，谢谢您的回复。我不知道直接安装 Sass 和通过 JavaScript 运行它之间有什么区别。但是，我的问题是指 NPM 和 Live Sass 编译器的优缺点。如果您对此了解更多，能否详细说明？:)

两者都是 JS 驱动的……所以速度上应该不会有太大的差异。由于它们是不同的项目，最大的区别在于如何安装和设置。 （NPM SASS 由 NPM 与 VS Code 分开安装。Live Sass Compiler 将作为扩展安装在 VS Code 中。）也许（！）还有另一个区别：在这两者之间，我听说 NPM Sass 不再处于维护状态和到目前为止，还没有按照最实际的版本Dart Sass。但由于我不使用 NPM Sass，我不确定那个谣言。但这听起来很严重，所以我想你可以仔细看看。

也许这些信息对你有帮助：npmjs.com/package/node-sass

嘿@Berber，感谢您的回答。我已经在我的问题描述中写了关于弃用的内容，并添加了一个关于如何为其他人更新到Dart Sass 的小指南。从您和第一个答案来看，似乎没有进一步的区别（当然除了明显的点之外）。不过感谢您的回答:)

感谢您提供更多信息。我认为每条信息都有帮助。在我的印象中，到目前为止，大多数用户都没有意识到新的开发，而且大的变化和更多的问题迟早会出现......即使规则 @use 变得更加流行并且将被更多的公共模块使用。尽管我个人更喜欢基于 VS Code 的解决方案，但很高兴知道有一个 NPM 版本的 Dart Sass。所以它还在继续...... ;-)

【参考方案2】：

我不知道你在看什么确切的教程。另外，我在前端的经验不是很丰富，但在我看来，使用 Sass 作为 CSS 预处理器并不是目前生产环境中的最佳选择。

但是，既然你问的是如何实现 sass，我将描述一个过程，就像你使用 React 和 npx create-react-app。

首先，您是对的，关于使用 dart-sass 而非 sass。此命令应该可以帮助您：npm install --save-dev sass。根据问题，您似乎已经尝试过了。

之后，在package.json 文件中的scripts 中添加新脚本："sass" : "sass src/Sass:src/Css --watch --no-source-map"，就完成了。

在我个人看来，我更喜欢通过npm 来实现它，而不是VSC 插件。毕竟会更稳定。但是，如果您出于测试/研究目的使用它，我认为您可以同时尝试。

【讨论】：

嘿@AlexZeDim，谢谢你的回答:) 实际上，我的问题是关于“这两个选项之间的好处和区别”。从您的回答中，我了解到：-npm 实现更稳定-VSC 插件对于测试/学习目的更有用这已经是很好的输入了！如果您还记得这方面的其他内容，请告诉我:)