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

IT技术 reactjs webpack sass create-react-app node-sass
2021-04-06 01:54:44

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

安装：

  • react v17.0.1,
  • 节点 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"
  },
 ...

  }
}
6个回答

TL; 博士

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

或者，如果使用Yarn（较新的CRA版本中的默认值）

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

Edit2 : 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 发行版。

但请注意：

小心使用这种方法。React-scripts 使用 sass-loader v8，它更喜欢 node-sass 而不是 sass（它有一些 node-sass 不支持的语法）。如果两者都安装并且用户使用 sass，这可能会导致 CSS 编译错误

@marcin 你说“他们”很有趣，因为发布答案的人是修复它的人:]
2021-05-22 01:54:44
@TylikStec yarn 是另一个包管理器，但不要在同一个项目中同时使用两者，有两个锁定文件可能会导致部署问题
2021-05-25 01:54:44
在一个类似于 OP 的全新 React 项目上，我有“node-sass”：“v5.0.0”和“sass-loader”：“^10.1.0”，但问题仍然存在。我的节点版本是 15.3.0。当我卸载 node-sass 并重新安装 @4.14.1 时，问题仍然存在，因为我使用的是 Node 版本 15.3.0，它需要 node-sass 版本 5.0+。
2021-06-11 01:54:44
由于某种原因yarn add node-sass@4.14.1要快得多
2021-06-14 01:54:44
看起来他们只是在github.com/webpack-contrib/sass-loader/commit/... 中修复了这个问题，所以你可以安装 sass-loader@10.0.5
2021-06-21 01:54:44

出现类似错误的唯一原因是您的 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版本即可。

这有效，我在安装 node-sadd@4 时遇到了一些问题
2021-06-01 01:54:44
这与其他建议相反。
2021-06-05 01:54:44
感谢您的回复 Nicolas Hevia，但我一直在尝试上面的代码，您是对的，如果我使用它，则无法更新该版本的 node-sass npm install node-sass@4.12。但是我一直在尝试在 nodejs 12.18.3 中使用 node-sass 4.14.1，但它不起作用。这就是为什么我建议使用 node-sass 团队推荐的版本而我不使用^. 因为会更新到最新版本的node-sass 4
2021-06-06 01:54:44
但我的节点版本是v16.9.1& node-sass6.0.1与该节点版本兼容
2021-06-11 01:54:44
使用这种方法，您将被锁定到 v4.x，而不是最新版本的 v4。例如，即使节点 12 支持 4.14，它也会被 4.12 卡住。除非您使用npm install node-sass@^4.12与安装 4.14.1（v4 的最新已知版本）相同的方式，否则 npm update node-sass 将无法工作。
2021-06-17 01:54:44

卸载 node-sass：

npm uninstall node-sass

使用sass：

npm install -g sass
npm install --save-dev sass
我使用 node v14.15.3 和 node-sass 4.14.1，只有 sass 方法有效。卸载并重建 node-sass 或将其升级到 5.x 并没有解决问题。谢谢！
2021-05-22 01:54:44
避免针对特定于项目的依赖项进行全局安装。npx sass在项目存储库中，您始终可以使用 npx 示例引用本地依赖项。
2021-06-02 01:54:44
这是最好的答案，因为 webpack 强烈推荐使用 Dart Sass
2021-06-05 01:54:44
小心使用这种方法。React-scripts 使用 sass-loader v8，它更喜欢 node-sass 而不是 sass（它有一些 node-sass 不支持的语法）。如果两者都安装并且用户使用 sass，这可能会导致 css 编译错误。
2021-06-09 01:54:44
而且，请注意全局安装。
2021-06-10 01:54:44

node-sass自2020 年 10 月 26 日起，又名LibSass已正式弃用，您应该改用sassaka Dart Sass。

因为npm你可以这样做：

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

对于yarn做：

yarn remove node-sass
yarn add sass
@ErikMartinesSanches 尝试在安装后重新启动您的节点服务器。
2021-05-24 01:54:44
@Erik Martines Sanches 从错误消息中可以明显看出 node sass 没有被卸载
2021-06-02 01:54:44
即使在那个纱线解决方案之后，我也得到 Node Sass 版本 6.0.1 与 ^4.0.0 || 不兼容 ^5.0.0。
2021-06-21 01:54:44

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

npm uninstall node-sass

然后安装sass：

npm install sass

对于那些使用Yarn 的人：

yarn remove node-sass
yarn add sass
即使在尝试“yarn remove node-sass”之前，我的 package.json 中也没有列出 node-sass。
2021-05-28 01:54:44
你能解决这个问题吗？如果不是，也许您可​​以描述一下您所面临的问题，我们可以尝试找出解决方案。
2021-06-05 01:54:44
其它你可能感兴趣的问题
上一篇在本机中隐藏键盘 下一篇如何从子组件内部更新 React Context？