logo标签列表

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

reactjswebpacksasscreate-react-appnode-sass
652

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

  }
}
23个回答
3

既然node-sass已经被废弃，您可以切换至Sass。

在您的package.json文件中：

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

在删除并替换为Sass后，React仍会要求使用node-sass。因此，您可以通过以下方式进行别名处理，这样React将使用Sass。

不要低估上一个答案！这种信念一再帮助了我。 - adjustment layer
2
如果报错为：

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

步骤1：停止服务器。
步骤2：运行命令 npm uninstall node-sass。
步骤3：检查 package.json 中是否存在 node-sass。如果存在，请再次运行步骤2。
步骤4：运行命令 npm install node-sass@4.14.1 <===。
步骤5：等待命令成功运行。
步骤6：使用 npm start 启动服务器。
2

我遇到了相同的问题，以下是我修复它的方法:

首先，您需要知道您在项目中使用的node-sass版本。然后升级或降级当前的Node.js版本以与当前的node-sass版本兼容，您可以通过此链接了解。

当然，停止服务器并关闭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>
1

小更新：如果您在使用node-sass时遇到以下错误，请按照以下步骤操作。

code EPERM npm ERR! syscall unlink

解决问题的步骤：

  1. 关闭Visual Studio
  2. 手动从node_modules中删除.node-sass.DELETE文件夹
  3. 打开Visual Studio
  4. npm cache verify
  5. npm install node-sass@4.14.1
关于“Visual Studio”：您是指“Visual Studio Code”吗？ - Peter Mortensen
1

在项目中删除 yarn.lock 文件

yarn remove node-sass
yarn add node-sass
锁定文件是做什么用的？为什么没有其他人建议使用它？ - Rohit Kumar
1

只需将版本更改为："version": "4.14.1"，在您的 package.json 文件中

1

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

1

enter image description here

npm 卸载 node-sass

npm 安装 sass

0
请注意，Node Sass已被弃用，您可以将其替换为Dart Sass：
警告：LibSass和Node Sass已被弃用。虽然它们将继续无限期地接收维护版本，但没有计划添加任何新的CSS或Sass功能或兼容性。仍在使用它们的项目应该转移到Dart Sass。
来源：node-sass 以下配方对我有帮助：
1. 卸载node-sass：
  • npm：npm uninstall node-sass
  • yarn：yarn remove node-sass
2. 卸载sass-loader：
  • npm：npm uninstall sass-loader
  • yarn：yarn remove sass-loader
3. 将Dart Sass安装为开发依赖项
  • npm：npm install sass -dev
  • yarn：yarn add sass -dev

构建之前，你还应该：

  1. 删除 node_modules 目录
  2. 删除锁定文件：
    • npm：删除 package-lock.json
    • yarn：删除 yarn.json
0

否则，重新构建您的node-sass，以便兼容性不会产生错误。 当node-sass和node之间的不兼容性发生时，您将收到typescript错误。 执行以下操作以实现node-sass兼容性。

npm rebuild node-sass

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接