错误：'node-sass' 版本 5.0.0 与 ^4.0.0 不兼容。

Question

我使用npm v7.0.7和Node.js v15.0.1命令创建了一个空的React项目，命令为npx create-react-app。

安装了以下内容：

• React v17.0.1
• node-sass v5.0.0

然后我尝试将一个空的.scss文件导入到App组件中：

文件 App.js

import './App.scss'

function App() {
  return (
    <div className="App">
      App
    </div>
  );
}

export default App;

它会抛出一个错误：

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

文件 package.json

{
  "name": "react-17-node-sass-5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
 ...

  }
}

- JDKot

Answer 1

简而言之：

1. npm uninstall node-sass
2. npm install sass

或者，如果使用 Yarn：

1. yarn remove node-sass
2. yarn add sass

编辑3：是的，又一个编辑。转到sass（dart-sass）是最好的解决方案。之前的解决方案包括将node-sass锁定到版本4.x.x，它已经2年没更新了并且缺少新的SCSS功能。

---

编辑2：sass-loader v10.0.5 修复了这个问题。问题在于您可能没有将其用作项目依赖项，而是更多地用作您依赖项的依赖项。 CRA使用固定版本，angular-cli锁定到node-sass v4等等。

现在的建议是：如果只安装node-sass，请查看以下解决方法（以及注释）。如果您正在处理空白项目并且可以管理您的 Webpack 配置（不使用CRA或CLI来创建项目），请安装最新的sass-loader。

---

编辑:此错误来自sass-loader。由于node-sass @latest是v5.0.0，而sass-loader期望^4.0.0，因此存在语义版本冲突。

他们的代码库中有一个未解决的问题，但有一个相关的修复程序需要审查。在此之前，请参考以下解决方案。

---

解决方法：暂时不要安装node-sass 5.0.0（刚刚升级了主版本）。

先卸载node-sass：

npm uninstall node-sass

然后安装最新版本（低于5.0）：

npm install node-sass@4.14.1

---

注意：LibSass已被弃用（因此node-sass也是），建议使用dart-sass实现。您可以使用sass代替，它是编译为纯JavaScript的dart-sass的Node.js分发版。（了解详情）（下载sass）

- Nicolas Hevia

---

出于某种原因，“yarn add node-sass@4.14.1” 的速度更快。 - Tylik Stec

看起来他们刚在https://github.com/webpack-contrib/sass-loader/commit/c3e279fb4668fce4c597a6c8cd1d0f2ff8bc95e5修复了这个问题，因此您可以安装sass-loader@10.0.5。 - Marcin

"yarn" 是另一个包管理器，但是不要在同一个项目中同时使用两者，因为拥有两个锁定文件可能会导致部署问题。 - Binara Medawatta

很有趣，你说“他们”，因为发表答案的人正是修正它的那个人：] - Benjamin Gruenbaum

在一个类似OP的全新React项目中，我有"node-sass":"v5.0.0"和"sass-loader":"^10.1.0"，但问题仍然存在。我的Node版本是15.3.0。当我卸载node-sass并重新安装@4.14.1时，问题仍然存在，因为我使用的Node版本是15.3.0，它需要node-sass 5.0+版本。 - Brendan

Answer 2

如果您遇到类似的错误，唯一的原因是您的Node.js版本与node-sass版本不兼容。

因此，请确保查阅node-sass文档。

或者，下面的图片将帮助您决定哪个Node.js版本可以使用node-sass版本。

例如，如果您在Windows系统上使用Node.js版本12（“可能”），那么您应该安装node-sass版本4.12。

npm install node-sass@4.12

是的，就是这样。现在你只需要安装与你计算机上安装的Node.js版本推荐的node-sass版本即可。

- Titus Sutio Fanpula

---

采用这种方法，您将被锁定在v4.x版本上，而不是拥有最新的v4版本。例如，即使node 12支持4.14，它也会被困在4.12上。npm update node-sass将无法工作，除非您使用npm install node-sass@^4.12，这与安装4.14.1（已知的最新版本v4）相同。 - Nicolas Hevia

谢谢你的回复Nicolas Hevia，但是我已经尝试了上面的代码，你说得对，如果我使用npm install node-sass@4.12就无法更新那个node-sass版本。但是我已经在nodejs 12.18.3中尝试了node-sass 4.14.1，但它没有工作。这就是为什么我建议使用node-sass团队推荐的版本，而我不使用^，因为它会更新到最新版本的node-sass 4。 - Titus Sutio Fanpula

这与其他建议相反而起作用。 - Dejan Toteff

这个可以运行，但我在安装node-sadd@4时遇到了一些问题。 - Florian

但是我的 Node 版本是 v16.9.1，而 node-sass 6.0.1 与该 Node 版本兼容。 - Zeeshan Ahmad Khalil

@Zeeshan Ahmad Khalil：推荐并不意味着你必须使用它。这意味着你可以使用其他东西，但其他东西可能会导致错误或者可能起作用。但通常建议的东西会起作用。 - Titus Sutio Fanpula

Answer 3

卸载 node-sass：

npm uninstall node-sass

使用sass的方法：

npm install -g sass
npm install --save-dev sass

- nooneswarup

---

注意使用这种方法。React-scripts使用sass-loader v8，它更倾向于使用node-sass而不是sass（因为node-sass不支持一些sass语法）。如果两者都安装了并且用户使用sass，这可能会导致CSS编译出现错误。 - Nicolas Hevia

还有，全局安装要小心。 - Raydot

避免在项目中全局安装依赖项。在项目存储库中，您始终可以使用npx命令来引用本地依赖项，例如：npx sass。 - fengelhardt

我正在使用node v14.15.3和node-sass 4.14.1，只有sass方法有效。卸载并重新构建node-sass或将其升级到5.x都无法解决问题。谢谢！ - Mike

这是最佳答案，因为Webpack强烈建议使用Dart Sass。 - Mo.

这应该是答案。 - Ketan

Answer 4

node-sass，又称LibSass，自2020年10月26日起已被官方弃用，建议使用sass，即Dart Sass。

对于npm，您可以执行以下操作：

npm uninstall node-sass
npm install sass --save-dev

对于 yarn 做：

yarn remove node-sass
yarn add sass

- yoel halb

---

即使使用了yarn解决方案，我仍然得到“Node Sass版本6.0.1与^4.0.0 || ^5.0.0不兼容”的错误。 - saner

从错误信息来看，很明显node sass没有被卸载。 - yoel halb

@ErikMartinesSanches 在安装后尝试重新启动你的节点服务器。 - Yonatan Dawit

这个解决方案对我有效。 - MK.

Answer 5

对我来说最好的解决方案是卸载 node-sass。

npm uninstall node-sass

然后安装 sass：

npm install sass

对于那些使用 Yarn 的人：

yarn remove node-sass
yarn add sass

- tngeene

---

即使在尝试“yarn remove node-sass”之前，我的package.json中也没有列出node-sass。 - saner

你能修复这个问题吗？如果不能，也许你可以描述一下你所面临的情况，我们可以尝试找出解决方案。 - tngeene

Answer 6

如果您正在使用默认的Yarn软件包管理器来使用CRA，请使用以下方法。 这对我很有效。

yarn remove node-sass
yarn add node-sass@4.14.1

- dhanushkac

Answer 7

使用npm：

1. npm uninstall node-sass（卸载node-sass）
2. npm install node-sass（安装node-sass）
3. 在package.json文件中将 "react-scripts": "4.0.0" 改为 "react-scripts": "4.0.3" ，然后保存。
4. npm install（安装依赖包）
5. npm start（启动应用程序）

或者，使用yarn：

1. yarn remove node-sass（卸载node-sass）
2. yarn add --dev node-sass（安装node-sass）
3. 同上
4. yarn install（安装依赖包）
5. yarn start（启动应用程序）

- Sathira Nipun

---

已确认此方法适用于Node 15和node-sass 5.0.0。 - Thomas Higginbotham

无法工作 缺少绑定 /Users/giz/code/genesislabs/client/node_modules/node-sass/vendor/darwin-x64-83/binding.node Node Sass 无法在您的当前环境中找到绑定：OS X 64位，使用 Node.js 14.x - Nir O.

更改react-scripts版本对我帮助很大。谢谢。 - Mahdiyeh

Answer 8

根据 Nicolas Hevia 的 Edit2，他在 这里 说：

sass-loader v10.0.5 可以解决这个问题。

我运行了以下命令：

npm install sass-loader@^10.0.5 node-sass --save-dev

那解决了我的问题。

请注意，我正在开发环境中工作。在其他情况下，应该去掉选项--save-dev。

- Jean-Marc

---

这个答案解决了我的问题。 - 黃皓哲

Answer 9

在添加特定版本的node-sass包（node-sass@4.14.1）后，它对我有用。

- renu dadhich

Answer 10

这是版本问题。请安装相应的依赖版本：

npm uninstall node-sass
npm install node-sass@4.14.1

- user13750521