小编典典

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

all

我使用以下命令创建了一个空白 React 项目:npx create-react-appon npm v7.0.7 and 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.

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

  }
}

阅读 518

收藏
2022-03-06

共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
是推荐的实现。您可以使用sassinstead,它是 dart-sass 的
Node.js 发行版,编译为纯 JavaScript。

2022-03-06