使用 npm 从 Node-Sass 迁移到 Sass（Dart-Sass）

厌倦了 node-sass 吗？

两年来，LibSassnode-sass一直处于弃用状态。核心团队做出这一决定有很多原因。
首先，自 2018 年以来没有添加任何功能，而且缺乏对诸如 之类的新 CSS 功能的支持calc()。

我负责重构一些遗留的 CSS，我厌倦了无法正确处理现代 CSS 并看到：

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (64)

那么，如何将 node-sass 迁移到 sass ？

要求：

• 最低节点 12👍
• 一台电脑😃

首先，删除所有 node_modules 文件夹或仅删除 node-sass 文件夹：

rm -rf node_modules/node-sass

其次，在您的 package.json 中，替换：

"devDependencies": {
    "node-sass": "version_installed"
}

经过

"devDependencies": {
    "sass": "^1.49.9"
}

并运行npm install/npm i

或者

node-sass删除package.json 中的依赖项并安装sass：

npm install --save-dev sass/npm i -D sass

第三，如果你像我一样有一些 npm 脚本，那么它从这里开始：

对此：

如果你想生成一些源映射，它不会从 变为node-sass。sass如果
你不想要它们，只需--no-source-map在你的脚本中添加

其中一个变化是关于输出和压缩 css 文件。
你node-sass需要添加：

--output-style compressed

现在，你要做的是：

--style=compressed

如果像我一样，您有一些来自另一个 repo 的 CSS 依赖项，则导入它的方式会略有不同。

有了node-sass，就很容易链接到节点模块：

@import 'node_modules/some_repo/scss/index/scss'

现在，您必须向 npm 脚本添加加载路径：

sass --load-path=node_modules/ scss/index.scss dist/index.css

然后在您的index.scss导入中通过

@import "some_repo/scss/index.scss";

⚠️@import已弃用，即使仍在维护，也不应该使用。就
我而言，没有机会使用@use来自@forwardsass

看看这里：规则

就这样！希望你喜欢这个快速教程。

封面：@der_maik / unsplash