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

Question

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

安装：

• 反应 v17.0.1，
• 节点萨斯 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.

文件 包.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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

TL;博士

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

或者，如果使用 Yarn

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

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

---

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

原文由 Nicolas Hevia 发布，翻译遵循 CC BY-SA 4.0 许可协议

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-sass团队推荐的node-sass版本，你的电脑上安装的是Node.js版本。

原文由 Titus Sutio Fanpula 发布，翻译遵循 CC BY-SA 4.0 许可协议