问题描述
我在npm v7.0.7和Node v15.0.1上使用以下命令创建了一个空白的React项目:npx create-react-app
已安装:
- 反应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"
},...
}
}
解决方法
TL; DR
-
npm uninstall node-sass
-
npm install node-sass@4.14.1
或者,如果使用纱线(新的CRA版本中的默认设置)
-
yarn remove node-sass
-
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。 semver不匹配,因为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)为deprecated,推荐使用dart-sass。 You can use sass
instead,它是dart-sass的节点分发版,已编译为纯JavaScript。
但是要警告:
,请谨慎使用此方法。 React-scripts使用sass-loader v8,它比node-sass更喜欢node-sass(它具有一些node-sass不支持的语法)。如果两个都安装并且用户使用了sass,则可能会导致CSS编译错误
卸载node-sass
<IconButton size="sm" icon="unicorn" isRound variantColor="yellow" />
通过以下方式使用sass:
npm uninstall node-sass
,
出现类似错误的唯一原因是,您的节点版本与节点-ass版本不兼容。
因此,请确保在此处签出文档:https://www.npmjs.com/package/node-sass
或者下面的这张图将帮助您,节点版本可以使用node-sass版本。
例如,如果您在Windows上使用节点版本12 (“也许”),则必须安装节点- sass版本4.12 。
npm install node-sass@4.12
是的,那样。因此,现在您只需要安装node-sass团队推荐的node-sass版本以及计算机上安装的节点即可。
,node-sass
aka LibSass 是 officially deprecated as of October 26 2020,而您应该使用 sass
aka Dart Sass。
对于 npm
,您可以:
npm uninstall node-sass
npm install sass --save-dev
对于 yarn
做:
yarn remove node-sass
yarn add sass
,
如果您碰巧在默认的yarn
软件包管理器中使用CRA,请使用以下内容。为我工作。
yarn remove node-sass
yarn add node-sass@4.14.1
,
使用 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
这是版本问题,安装正确的依赖版本
npm uninstall node-sass
npm install node-sass@4.14.1
,
在添加特定版本的node-sass软件包(node-sass@4.14.1)后,它对我有用
,如果错误是
错误:Node Sass版本5.0.0与^ 4.0.0不兼容
第一步:停止服务器
第2步:运行命令为npm uninstall node-sass
Step3:检查package.json
中的node-sass是否在文件中可用,然后再次运行Step2。
第4步:npm install node-sass@4.14.1
第5步:等待命令成功运行。
步骤6:使用npm start
启动服务器
当NodeJS和Node Sass的版本不匹配时,会发生此错误。
您可以通过以下操作解决问题:
-步骤1 :从计算机中删除Nodejs
-步骤2 :重新安装Nodejs版本14.15.1。
-步骤3 :通过运行命令npm uninstall node-sass
-步骤4 :通过运行命令npm install node-sass@4.14.1
完成所有步骤后,您可以运行命令ng serve -o
来运行您的应用程序。
Node sass version 5.0.0 is incompatible with ^4.0.0.
,小更新:如果您遇到有关 node-sass 的以下错误,请按照以下步骤操作。
代码 EPERM
npm 错误!系统调用取消链接
解决问题的步骤:
- 关闭视觉工作室
- 从 node_modules 中手动删除 .node-sass.DELETE
- 打开视觉工作室
- npm 缓存验证
- npm install node-sass@4.14.1
只需将版本更改为: "version": "4.14.1" 在你的 package.json 文件中
,添加 sass-loader 作为 dev-dependency 为我解决了这个问题。 "devDependencies": { "node-sass": "^6.0.0","sass-loader": "^11.1.1" }
,对我来说最好的解决方案是卸载 node sass。
npm uninstall node-sass
然后安装sass
npm install sass
对于那些使用纱线的人
yarn remove node-sass
yarn add sass
,
解决此问题的步骤:
- 转到您的 node_module 并打开 node-sass 模块。
2 在 node-sass 中的 package.json 中,将版本从“5.0.0”更改为“4.14.1”。
3 最后在主项目根目录下的 package.json 中再次将 node-sass 版本从“5.0.0”更改为“4.14.4”。
这应该有效。