在 Create React App v3.x 中用 Dart-Sass 替换 Node-Sass答案

【问题标题】：Replace Node-Sass with Dart-Sass in Create React App v3.x在 Create React App v3.x 中用 Dart-Sass 替换 Node-Sass
【发布时间】：2021-01-04 16:26:03
【问题描述】：

有人成功做到这一点了吗？我目前在我的 CRA 项目中安装了 node-sass，我正在尝试用 dart-sass 替换它，但我遇到了困难，因为 CRA 错误输出告诉我需要安装 node-sass。有什么方法可以让底层 CRA 配置知道使用我安装的 dart-sass 包而不是 node-sass？

【问题讨论】：

标签： sass create-react-app node-sass

【解决方案1】：

如果你使用的是 npm > 6.9，你可以像这样创建一个别名

npm install node-sass@npm:sass

它将安装dart-sass，您将能够保留您的 CRA 配置。

【讨论】：

这对我有用，谢谢
我使用的是 npm 而不是纱线，所以无法遵循第一个解决方案。不过这个效果很好。
该死，猜猜这是出于某种原因破坏了npm outdated 命令！
@dmikester1：你为什么不能像这样用纱线做上述事情：yarn add node-sass@yarn:sass;它似乎对我有用。
@Jeff 我没有使用 Yarn，即使我使用 NPM 也可以这样做吗？

【解决方案2】：

在 CRA 存储库中有这个 closed issue，因此您可能只需运行几个命令即可轻松地从 node-sass 迁移到 Dart Sass。

首先检查您的yarn.lock 或package-lock.json 以了解您的react-scripts 所依赖的sass-loader 的版本是否为7.2.0 或更高版本。

如果是这样，您只需运行以下命令：

yarn remove node-sass
yarn add sass

在我的情况下，之后我不得不删除 node_modules 目录并再次运行 yarn install，因为说明应用程序的问题。

注意事项：

我使用的react-scripts 版本是4.0.0
npm lib for Dart Sass 是sass
自 2020 年 10 月 26 日起使用node-sass is deprecated

【讨论】：

像魅力一样工作！就我而言，只需要删除node-sass 并添加sass。我将其添加为devDependency，这会对生产行为产生负面影响吗？谢谢！
@sevenlops，CRA 的文档说要在dependencies 上安装它：create-react-app.dev/docs/adding-a-sass-stylesheet Thera 也有很多问题质疑直接在dependencies 上添加依赖项这一事实，而且似乎在某些情况下，将依赖项添加到 devDependencies 可能会导致构建失败。检查此问题以获取更多信息：github.com/facebook/create-react-app/issues/2696
嗨，@MiltonCastro 我也遵循了您的方法，但之后遇到了问题。 SassError: Expected "n". ╷ 645 │ .MuiSlider-markLabel.MuiSlider-markLabelActive:nth-last-child(){ ..} 。之后我再次尝试删除node_modules 和npm install，但它对我不起作用。你能帮忙吗？
您似乎已成功迁移到 Dart Sass，但您的代码出现了转译错误。我已经迁移过一次这种问题，它与一个类属性中缺少分号有关。请尝试从第 645 行开始评论整个班级.MuiSlider-markLabel.MuiSlider-markLabelActive:nth-last-child，以检查此错误是否已修复。如果是这样，您可以尝试缩小注释代码的范围，直到找到确切的故障点。
请注意，您可能需要先升级react-scripts 版本（我在 3.0.x 上，必须更新到 4.0.3）。旧版本可能无法识别 sass 库。升级很容易，他们在发布页面上有说明。只需使用--exact 安装最新版本，并且可能还要重新安装node_modules。

【解决方案3】：

我成功了：

npm uninstall node-sass
npm install ci

【讨论】：