使用 Live Sass CompilerVS Code 扩展还是通过 npm 安装和运行 Sass 更好? + 提示如何从 node-sass 更改为 dart-sass

问题描述

我正在上一门关于高级 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. 将脚本中显示 node-sass 的位置更改为 sass(在 package.json 中)
  3. -w 脚本中的 watch:sass 更改为 --watch(在 package.json 中)
  4. 您也可以执行 npm uninstall node-sass 来摆脱它

解决方法

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

但是,既然您问的是如何实现 sass,我将描述一个过程,就像您将 React 与 npx create-react-app 一起使用一样。

首先,您是对的,关于使用 dart-sass 而不是 sass。这个命令应该可以帮助你:npm install --save-dev sass。根据问题,您似乎已经尝试过了。

之后,将新脚本添加到您的 scripts 文件中的 package.json"sass" : "sass src/Sass:src/Css --watch --no-source-map" 并完成。

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

,

如果您想在“Live Sass Compiler”中使用最实际的 Dart SASS 版本,您需要注意版本。多年来不支持最流行的版本,因此它不支持 Dart Sass。

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

关于 NPM 和 Live Sass 编译器的问题:两者都是 Sass 的 Javascript 版本。作为 Javascript 版本,它们不像直接在系统上安装 SASS 那样快。 Javascript 版本本身之间的差异并不大。因此,我认为 NPM 和 Live Sass 编译器之间的最佳选择是使用 Live Sass 编译器(分叉版本!),因为它已集成到编辑器中并且更易于直接使用。

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

详细信息:

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

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