Node.js Sass版本7.0.0与^4.0.0 || ^5.0.0 || ^6.0.0不兼容。

Question

Node.js Sass版本7.0.0与^4.0.0 || ^5.0.0 || ^6.0.0不兼容。

javascriptnode.jsreactjssass

155

我使用了 Node.js v16.13.1 创建了一个 React 应用程序。我尝试使用Sass，但在运行时出现以下错误：

Node Sass 版本 7.0.0 与 ^4.0.0 || ^5.0.0 || ^6.0.0 不兼容。

- anderson j mariño o.

那么，你有什么问题吗？看起来Node Sass版本7.0.0与你正在运行的节点版本不兼容。 - Dominik

是的，你说得对@Dominik，我只是通过sass进行了更改。 - anderson j mariño o.

3

如果我使用 Node 16，我会得到相同的错误。它会抱怨 7.0.0 不兼容 4.0.0。但我并没有运行 4！我正在运行 16！ - Oliver Watkins

@OliverWatkins 这是 npm 版本，不是 node 版本。你可以使用 npm -v 命令来检查 npm 版本。 - Mahdiyeh

你正在使用哪个版本的react-scripts？这可能是一个依赖问题，与node版本无关。 - Mick

13个回答

142

不要再使用node-sass了

node-sass已被弃用，应使用sass。您可以卸载旧版本并安装新版本：

npm uninstall node-sass
npm install sass

但是如果你仍然偏好使用`node-sass`

您可以使用以下表格来安装适合您已安装的Node.js版本的适当版本node-sass，您可以通过命令node --version来检查。

npm install node-sass@(your version)

- Abraham

2

这个解决方案对我有效。应该接受为答案。node-sass在新版本的Node中已被弃用。 - Khaled Rakhisi

2

解决了我的问题。谢谢。 - Shuhad zaman

1

问题解决了，我也遇到了同样的问题。太好了！ - NKM

实际上我之前这样做是因为我的另一个项目只需使用sass就能正常工作，但当我使用typescript模板创建新项目时，现在出现了操作系统错误。有什么建议吗？ - JkAlombro

@JkAlombro 你可能需要使用 node --version 命令检查 Node 版本，并根据表格安装特定版本。只有在版本不匹配时，才会出现 OP 的错误。 - Abraham

19

您只需在package.json文件中切换到Sass，就像这样：

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

这样做后，即使您移除了node-sass并替换为sass，React仍会请求它，因此您可以像这样设置别名，现在React将使用Sass。

- Mark O

2

哇，太棒了，非常感谢你的解决方案！许多组件使用已弃用的依赖项node-sass，这是更好的清洁解决方案。 - Slinker009

这个对我来说在 Node 16.17.0、React@18.2.0 和 React-Scripts@2.1.3 上解决了问题。谢谢。 - CosminO

2

在所有的选项中，这是唯一可行的，谢谢。 - Uriel Cisneros

1

在花费了超过6个小时安装和重新安装node-sass/sass之后，这是唯一有效的方法。非常感谢！ - Amrita Yadav

谢谢，它也解决了我的问题！ - AOUADI Slim

18

我也遇到了与 sass 相同的问题，我尝试运行下面这些命令，但是它们都没有起作用。

npm uninstall node-sass
npm install sass

最后我查看了我的package.json文件，发现我安装了sass-loader，因此我卸载并重新安装它，问题解决了。以下是您可以使用的相关命令：

npm uninstall sass-loader
npm install sass-loader

npm uninstall sass-loader
npm install sass-loader

- erfanmashari

是的，加载器是问题所在。当您删除node-sass以切换到sass时，必须同时删除node-sass的加载器，否则它将永远给您带来问题。 - Astro

11

我使用以下命令以版本4.14.1的node-sass解决了这个问题：

使用npm

npm uninstall node-sass
npm install node-sass@4.14.1

使用yarn

yarn remove node-sass
yarn add node-sass@4.14.1

- Marco Valeri

1

为什么在 Node 版本是 16 的情况下要使用 node-sass 4.14.1？我很困惑。 - Oliver Watkins

2

嗨，Oliver，问题不在于Node的版本，而在于npm包node-sass的版本。 - Marco Valeri

11

只需要删除node-sass并安装sass即可：

删除node_modules目录。
运行yarn remove node-sass
运行yarn add sass

或者使用npm

删除node_modules目录。
运行npm uninstall --save node-sass
运行npm install --save sass

- MSKashef

7

这个问题的回复中存在很多错误信息，而且在谷歌中排名第一：

如果在您的应用程序中遇到此问题，则罪魁祸首并不是node-sass或Node.js版本。问题出在sass-loader上，需要升级该库，因为旧版本与更新的node-sass不兼容。

- d4rky

只有一个sass-loader的问题吗？如果是，它指的是什么？ - Peter Mortensen

5

你只需简单执行 npm install node-sass@6.0 命令。

这是因为 Node.js 16 兼容于 node-sass 版本 6.0。

- Abraham

3

我遇到了同样的问题，在安装 'node-sass' 时，我的 Node.js 版本是15。

降级到 Node.js 版本12并安装与版本12相关的 'node-sass' 后，它工作正常了。

node -v

# Output: v15.2.0

nvm use 12.18.3

现在使用的是 Node.js v12.18.3 (npm v6.14.6)

node -v

# Output: v12.8.3

npm install node-sass@4.14.1

为了确保其正常工作，请添加一些 abc.sass 文件，并在组件中编写样式并导入它。

- Kodali444

0

根据输入和以下步骤，我已经成功地在Shopware6上运行了它，而在build-administration.sh中出现了类似的错误：

错误：Node Sass版本7.0.1与^4.0.0不兼容。

ERROR in ./src/app/component/base/sw-button/sw-button.scss (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ref--15-2!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/app/component/base/sw-button/sw-button.sc)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
    at getRenderFuncFromSassImpl (/var/ww

检查当前安装的node-sass版本并卸载和安装“较低”的版本：

npx node-sass -v results in:
node-sass: 7.0.1
libsass 3.5.5

npm uninstall node-sass
npm install node-sass@4.14.1

npx node-sass -v results in:
node-sass       4.14.1  (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]

在此之前，我检查了完整的htdocs文件夹中提到的版本号：

.../htdocs$ find . -iname '*package.json*'  | xargs  grep node-sass {}

在生成的（庞大）列表中，找到了以下的node-sass版本：

....nistration/Resources/app/administration/node_modules/node-sass/package.json:    "lint": "eslint bin/node-sass lib scripts test",
./vendor/shopware/administration/Resources/app/administration/node_modules/sass-loader/package.json:    "node-sass": "^4.5.0",
grep: {}: Datei oder Verzeichnis nicht gefunden
./vendor/shopware/administration/Resources/app/administration/node_modules/stylelint-webpack-plugin/package.json:    "node-sass",
./vendor/shopware/administration/Resources/app/administration/build/nuxt-component-library/package.json:        "node-sass": "4.12.0",
./vendor/shopware/administration/Resources/app/administration/package.json:    "node-sass": "^7.0.1",    <<<<<< THIS ONE !!
./vendor/shopware/administration/Resources/app/administration/package.jsonORIG-2021-12-29:    "node-sass": "^7.0.1",

卸载并安装node-sass@4.14.1，并更改标记行从

"node-sass": "^7.0.1",

到

"node-sass": "^4.0.1",

编译成功，build-administration.sh（一个 Shopware6 的东西......）也成功了。

Time: 58913ms
Entrypoint commons = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/js/commons.js
Entrypoint app = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/app.css static/js/app.js
Entrypoint storefront = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/storefront.css static/js/storefront.js
Entrypoint payone-payment = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/payone-payment.css static/js/payone-payment.js
Entrypoint wbm-tag-manager-ecomm = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/wbm-tag-manager-ecomm.css static/js/wbm-tag-manager-ecomm.js
   3909 modules
build-administration.sh: 14: build-administration.sh: [[: not found
Copying files for bundle: FrameworkBundle
Copying files for bundle: MonologBundle
Copying files for bundle: SwiftmailerBundle
Copying files for bundle: SensioFrameworkExtraBundle
Copying files for bundle: TwigBundle
Copying files for bundle: EnqueueBundle
Copying files for bundle: EnqueueAdapterBundle
Copying files for bundle: Framework
Copying files for bundle: System
Copying files for bundle: Content
Copying files for bundle: Checkout
Copying files for bundle: Administration
Copying files for bundle: Storefront
Copying files for bundle: Elasticsearch
Copying files for bundle: SwagPlatformDemoData
Copying files for bundle: Netzp6AddressValidator
Copying files for bundle: PayonePayment
Copying files for bundle: WbmTagManagerEcomm
Copying files for bundle: DbalKernelPluginLoader


 [OK] Successfully copied all bundle files

- Denis K.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- superdunck · Accepted Answer

296

如果你想在React应用中使用SCSS和Sass，请按以下步骤操作，以确保你的文件能被正确编译：

首先删除node-sass：

yarn remove node-sass
# if you use npm
npm uninstall node-sass

然后安装 sass 而不是 node-sass:

yarn add -D sass
# if you use npm
npm i -D sass

- superdunck

4

我使用相同版本的Node和create-react-app，但仍然出现错误：要导入Sass文件，您首先需要安装node-sass。请在您的工作区内运行 npm install node-sass 或 yarn add node-sass。 - Austin B

1

很棒的解决方案。现在我可以在文档中看到它了:https://create-react-app.dev/docs/adding-a-sass-stylesheet - Royal

2

只是添加那么一些使用者可能需要更新 webpack.config.js 文件

 "css-loader",                     {                         loader: "sass-loader",                         options: {                             implementation: require("sass")                         }                     }

- paraS elixiR

1

这里的“-D”是什么意思？ - Rakis Friski

3

@RakisFriski 中的 -D 是 --save-dev 的缩写，将依赖项添加到 "devDependencies" 中。 - KeatsPeeks

显示剩余5条评论

Node.js Sass版本7.0.0与^4.0.0 || ^5.0.0 || ^6.0.0不兼容。

不要再使用node-sass了

但是如果你仍然偏好使用node-sass

但是如果你仍然偏好使用`node-sass`