7

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

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

另一种选择是使用 VS Code 扩展“Live Sass Compiler”。似乎这个选项被很好地接受了。

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

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

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

  1. 使用命令行安装 dart sass：npm i -D sass
  2. 更改脚本的位置（在 package.json 中node-sass）sass
  3. -w将watch:sass脚本中的更改为--watch（在 package.json 中）
  4. 你也可以这样做npm uninstall node-sass来摆脱它
4

2 回答 2

1

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

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

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

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

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

于 2021-03-19T17:31:34.087 回答
1

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

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

关于 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 ://stackoverflow.com/a/66207572/9268485

于 2021-03-20T11:47:25.063 回答