使用 Live Sass 编译器(VS 代码扩展)还是通过 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)
我正在学习高级 CSS 和 Sass 的在线课程,发现课程中显示的方式有点过时。
课程在依赖项中使用了node-sass,已弃用。一个直接的替代方法是使用 Dart-sass(我会在最后写下我的步骤,也许有人会从中受益:))
另一种选择是使用 VS 代码扩展“Live Sass 编译器”。看来这个选项还是挺受欢迎的。
但是,我想知道这些选项有什么好处和区别。例如。昨天我在扩展时遇到了一些麻烦,然后使用飞镖 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 作为 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 插件来实现它。毕竟它会更稳定。但如果你正在使用它,为了 test/study 目的,我认为你可以尝试两者。
如果你想使用最实际的版本 Dart SASS 和 'Live Sass Compiler' 你需要注意版本。最流行的版本多年来一直不受支持,因此不支持 Dart Sass.
但是有一个支持的分支,作为分支你可以使用相同的设置。
关于 NPM 和 Live Sass 编译器的问题:两者都是 Javascript 版本关闭 Sass。作为 Javascript 版本,它们的速度不如直接在系统上安装 SASS。 Javascript 版本本身的区别并不大。所以我认为 NPM 和 Live Sass 编译器之间的最佳选择是使用 Live Sass 编译器(分叉版本!),因为它集成到编辑器中并且更容易直接从那里使用。
如果您需要更快的解决方案,您确实应该安装原始版本。这并不像听起来那么困难。还有一个 VS 代码扩展,可以直接从 VS 代码轻松使用原始安装的版本。
详细信息:
直接在您的系统上安装SASS:
https://sass-lang.com/install
指定 VS Code 扩展的信息:
我正在学习高级 CSS 和 Sass 的在线课程,发现课程中显示的方式有点过时。
课程在依赖项中使用了node-sass,已弃用。一个直接的替代方法是使用 Dart-sass(我会在最后写下我的步骤,也许有人会从中受益:))
另一种选择是使用 VS 代码扩展“Live Sass 编译器”。看来这个选项还是挺受欢迎的。
但是,我想知道这些选项有什么好处和区别。例如。昨天我在扩展时遇到了一些麻烦,然后使用飞镖 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 作为 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 插件来实现它。毕竟它会更稳定。但如果你正在使用它,为了 test/study 目的,我认为你可以尝试两者。
如果你想使用最实际的版本 Dart SASS 和 'Live Sass Compiler' 你需要注意版本。最流行的版本多年来一直不受支持,因此不支持 Dart Sass.
但是有一个支持的分支,作为分支你可以使用相同的设置。
关于 NPM 和 Live Sass 编译器的问题:两者都是 Javascript 版本关闭 Sass。作为 Javascript 版本,它们的速度不如直接在系统上安装 SASS。 Javascript 版本本身的区别并不大。所以我认为 NPM 和 Live Sass 编译器之间的最佳选择是使用 Live Sass 编译器(分叉版本!),因为它集成到编辑器中并且更容易直接从那里使用。
如果您需要更快的解决方案,您确实应该安装原始版本。这并不像听起来那么困难。还有一个 VS 代码扩展,可以直接从 VS 代码轻松使用原始安装的版本。
详细信息:
直接在您的系统上安装SASS:
https://sass-lang.com/install
指定 VS Code 扩展的信息: