Error: 'node-sass' version 5.0.0 is incompatible with ^4.0.0

Question

我使用以下命令创建了一个空白的 React 项目：npx create-react-app on npm v7.0.7 和 Node.js v15.0.1

已安装：

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"
  },
 ...

  }
}

Answer 1

TL;DR

npm uninstall node-sass
npm install sass

或者，如果使用 Yarn

yarn remove node-sass
yarn add sass

Edit3：是的，另一个编辑。移动到 sass (dart-sass) 是最好的解决方案。上一个包括锁定 node-sass 到版本 4.x.x，该版本已有 2 年历史并且缺少更新的 SCSS 功能。

Edit2: sass-loader v10.0.5 修复了它。问题是您可能没有将它用作项目依赖项，而是更多地用作依赖项的依赖项。 CRA 使用固定版本，angular-cli 锁定到 node-sass v4，等等。

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

编辑：此错误来自 sass-loader. There is a semantic versioning 不匹配，因为 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）is deprecated and dart-sass is the recommended implementation. You can use sass instead，它是 dart-sass 的 Node.js 发行版编译为纯 JavaScript。

Answer 2

卸载node-sass:

npm uninstall node-sass

通过以下方式使用 sass：

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

Answer 3

您遇到类似错误的唯一原因是您的 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-sass团队推荐的node-sass版本，你电脑上安装的是Node.js版本

Answer 4

如果您碰巧使用 CRA with the default Yarn 包管理器，请使用以下命令。它对我有用。

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

Answer 5

如果错误是

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

第一步：停止服务器

第 2 步：运行命令是 npm uninstall node-sass

Step3：检查 package.json 中的 node-sass 如果 node-sass 在文件中可用，然后再次运行 Step2.

Step4: npm install node-sass@4.14.1 <=== 运行命令

Step5：等待命令成功运行s.

第 6 步：使用 npm start

启动服务器

Answer 6

添加特定版本的 node-sass 包后它对我有用 (node-sass@4.14.1)

Answer 7

小更新：如果您遇到以下有关节点的错误-sass，请按照下面给出的步骤操作。

code EPERM npm ERR! syscall unlink

解决问题的步骤：

关闭 Visual Studio
从 node_modules
打开 Visual Studio
npm cache verify
npm install node-sass@4.14.1

Answer 8

这是版本问题。安装正确的依赖版本：

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

Answer 9

使用 npm，

npm uninstall node-sass
npm install node-sass
将package.json中的"react-scripts": "4.0.0"改成"react-scripts": "4.0.3"并保存
npm install
npm start

或者，使用纱线 -

yarn remove node-sass
yarn add --dev node-sass
同上
yarn install
yarn start

Answer 10

解决此问题的步骤：

转到您的 node_module 文件夹并打开 node-sass 模块。
在 node-sass 中的 package.json 文件中，将版本从“5.0.0”更改为“4.14. 1".
最后在主项目根目录的 package.json 中再次将 node-sass 版本从“5.0.0”更改为“4.14.4”。

这应该有效。

Answer 11

只需将版本更改为： “版本”：package.json 文件中的“4.14.1”

Answer 12

node-sass 又名 LibSass 是 officially deprecated as of October 26 2020 而你应该使用 sass 又名 Dart Sass.

对于 npm 你可以这样做：

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

对于yarn做：

yarn remove node-sass
yarn add sass

Answer 13

添加 sass-loader 作为开发依赖为我解决了这个问题。 "devDependencies": { "node-sass": "^6.0.0", "sass-loader": "^11.1.1" }

Answer 14

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

npm uninstall node-sass

然后安装 sass:

npm install sass

对于使用 Yarn 的用户：

yarn remove node-sass
yarn add sass

Answer 15

我遇到了同样的问题，下面是我解决它的方法：

首先，您必须知道您在项目中使用的 node-sass 版本。然后把你现在的Node.js版本升级或者降级到和你现在的node-sass版本兼容的版本，你可以从this link.

知道

当然，停止服务器，关闭你的IDE。

所以，升级或降级Node.js版本的最佳方式，已经在上面中提到了。然后删除 node_modules 和 package-lock.json 并重新安装...您可以这样做：

npm cache clean --force

rm -rf /node_modules package-lock.json

npm install

npm audit fix

npm run <your_script_name>

Answer 16

根据 Edit2 的说法

sass-loader v10.0.5 fixes it

我启动了这个命令：

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

这解决了我的问题。

请注意，我处于开发环境中。在其他情况下，应删除选项 --save-dev。

Answer 17

在 app.js 或导入 css 的任何地方，确保导入 css 而不是 scss。 package.json 中的脚本将创建一个 css 文件，这就是应该导入的文件。

    "scss": "node-sass --watch -include-path src/scss -o src/css"

此脚本将监视 src 中名为 scss 的文件夹内的 scss 文件。然后它将在 src 中创建一个 css 文件夹并在该文件夹中添加一个 css 文件，这是您应该在 app.js

中导入的文件

到运行脚本：

npm run scss

文件结构示例： src/scss/styles.scss

CSS 脚本创建的文件： src/css/styles.css

Answer 18

或者重建您的节点-sass，这样兼容性就不会产生错误。当 node-sass 和 node 不兼容时，你会得到 typescript errors 。这样做是为了实现节点-sass 兼容性。

npm 重建节点-sass

Answer 19

此错误是由于 sass 加载程序与 node-sass.

的不兼容版本造成的

在 package.json 文件的末尾添加这些依赖项。

注意：您可以google检查哪个 sass-loader 版本与您的 node-sass 版本兼容。

“devDependencies”：{ “节点-sass”：“^6.0.1”， “sass-装载机”：“^10.2.0” }

Answer 20

删除项目中的一个yarn.lock文件和

yarn remove node-sass
yarn add node-sass

Answer 21

更新答案

请注意 Node Sass 已贬值，您可以将其替换为 Dart Sass:

Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

来源：https://www.npmjs.com/package/node-sass

下面的食谱对我有帮助：

卸载node-sass：
- npm: npm uninstall node-sass
- 纱线：yarn remove node-sass
卸载sass-loader：
- npm: npm uninstall sass-loader
- 纱线：yarn remove sass-loader
安装 Dart Sass 作为开发依赖
- npm: npm install sass -dev
- 纱线：yarn add sass -dev

在构建之前，您还应该：

删除 node_modules 目录
删除锁定文件：
- npm：删除 package-lock.json
- 纱线：移除yarn.json

Answer 22

你可以切换到 sass 因为 node-sass 现在已经弃用了

在你的package.json

"node-sass": "npm:sass@^1.49.9",

React 在删除它并替换为 sass 后仍然要求 node-sass 所以你可以像这样给它起别名，现在 React 将使用 sass

Error: 'node-sass' version 5.0.0 is incompatible with ^4.0.0