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

Posted 2023-03-07

【中文标题】Node.js Sass 版本 7.0.0 与 ^4.0.0 不兼容 || ^5.0.0 || ^6.0.0

【英文标题】：Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0

【发布时间】：2022-01-13 18:41:12

【问题描述】：

我正在使用 Node.js 16.13.1 并创建了一个 React 应用程序并尝试使用 Sass，但是当我尝试运行它时，我收到此错误：

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

【问题讨论】：

所以？你有什么问题？看起来 Node Sass 版本 7.0.0 与您正在运行的节点版本不兼容

是的，你说得对@Dominik，我只改变了sass。

如果我在节点 16 上，我会得到同样的错误。它抱怨 7.0.0 与 4.0.0 不兼容。但我没有跑4！！！！我正在跑步 16 岁！！！！

@OliverWatkins 是 npm 版本。不是节点版本。您可以使用 npm -v

检查 nmp 版本

您使用的是哪个版本的 react-scripts？这可能是依赖问题，与节点版本无关。

【参考方案1】：

如果你想在你的 React 应用中使用 SCSS 和 Sass，尝试这样做：

先删除node-sass：

yarn remove node-sass

如果你使用 npm：

npm uninstall node-sass

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

yarn add -D sass

或

npm i -D sass

你的 SCSS 和 Sass 文件终于可以正确编译了！

【讨论】：

像魅力一样工作：+1：

谢谢你，工作完美

我使用的是相同版本的 node，和 create-react-app，但我仍然收到类似的错误：要导入 Sass 文件，您首先需要安装 node-sass。在工作区中运行 npm install node-sass 或 yarn add node-sass。

很好的解决方案。我现在看到的文档中也提到了它：create-react-app.dev/docs/adding-a-sass-stylesheet

像魅力一样工作！

【参考方案2】：

不要再使用 node-sass

node-sass 已弃用。请改用sass。

你可以卸载旧的并安装新的

npm uninstall node-sass

npm install sass

但如果你更喜欢使用node-sass

您可以使用下表为您安装的节点版本安装适当的版本node-sass，您可以通过命令node --version检查它

npm install node-sass@(your version)

【参考方案3】：

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

使用 npm

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

用纱

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

【讨论】：

但是为什么 node-sass 4.14.1 当节点是版本 16 时？我很困惑。

嗨 Oliver，这不是 node 的版本，它是 npm 包 node-sass 的版本

【参考方案4】：

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

在降级节点版本 node-12 并安装与 node-12 相关的“node-sass”后，它工作正常。

node -v

# Output: v15.2.0

nvm use 12.18.3

现在使用节点 v12.18.3 (npm v6.14.6)

node -v

# Output: v12.8.3

npm install node-sass@4.14.1

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

【参考方案5】：

你可以简单地做npm install node-sass@6.0。

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

【参考方案6】：

两个月前我收到了这个错误。我尝试了所有可能找到的解决方案。

检查你是否在桌面上创建了多个 React 项目。我做了同样的事情并开始面对这个问题。将它们全部组合在一个文件夹中以消除错误。它对我有用。如果您犯了同样的错误，请尝试此操作。

【参考方案7】：

根据输入和以下步骤，我让它在 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