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

我使用 Node.js v16.13.1并创建了一个 React 应用程序。我尝试使用 无礼，但是当我尝试运行它时，我得到了这个错误:

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

155403 次浏览
小开

如果你想在你的 React 应用程序中使用 SCSS和 无礼，尝试做如下操作，你的文件将被正确编译:

  1. 首先删除 node-sass:
yarn remove node-sass
# if you use npm
npm uninstall node-sass
  1. 然后安装 sass而不是 node-sass:
yarn add -D sass
# if you use npm
npm i -D sass
小开

我使用 node-sass version 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。改为使用 sass。您可以卸载旧版本并安装新版本:

npm uninstall node-sass
npm install sass



但是如果您仍然喜欢使用 node-sass

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

npm install node-sass@(your version)

Enter image description here

小开

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

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

小开

我也遇到了同样的问题，在安装“ 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

为了确保它正常工作，添加一些 无礼文件，然后编写样式并导入到组件中。

小开

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

检查是否在桌面上创建了多个 React 项目。我也做了同样的事情，开始面对这个问题。将它们合并到一个文件夹中以消除错误。这招对我很管用。如果你正在犯同样的错误，请试试这个。

小开

基于输入和以下步骤，我让它在 shopware6中工作，而在 Build-administration.sh中发生了类似的错误:

错误: NodeSass 版本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

检查当前安装的节点-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 {}

在产生的(巨大的)列表中，可以找到下面的节点-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(一个商店仓库6的东西...)成功。

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
小开

我在使用 sass时遇到了同样的问题，我运行了下面这些命令，但是没有一个能够正常工作。

npm uninstall node-sass
npm install sass

最后我看了看我的 package.json，我发现我安装了 装弹手，所以我卸载并安装了它，问题就解决了。你可以使用下面的命令:

npm uninstall sass-loader
npm install sass-loader
小开

你可以在 包裹 Json文件中切换到 Sass，如下所示:

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

这样，React 在移除 node-sass并替换为 sass之后，仍然要求使用 node-sass，所以您可以像这样使用别名，现在 React 将使用 Sass。

小开

只需删除 node-sass并安装 sass代替:

  1. 删除 Node _ module目录。
  2. 运行 yarn remove node-sass
  3. 运行 yarn add sass

或者 NPM

  1. 删除节点 _ 模块目录。
  2. 运行 npm uninstall --save node-sass
  3. 运行 npm install --save sass
小开

在对这个问题的回答中有很多错误的信息，这是第一件出现在谷歌上的事情:

如果在应用程序中看到这个问题，罪魁祸首是 没有的 node-sass或 Node.js 版本。这是 sass-loader的问题，也是您需要升级的库，因为旧版本与新版本不兼容。

小开

对我来说 # 首先使用 npm 卸载 Npm 卸载 node-sass 那就安装 # 使用 npm NPM I-D Sass


提交答案