错误：“node-sass”版本 5.0.0 与 ^4.0.0 不兼容

【问题标题】：Error: 'node-sass' version 5.0.0 is incompatible with ^4.0.0错误：“node-sass”版本 5.0.0 与 ^4.0.0 不兼容
【发布时间】：2021-02-13 21:36:03
【问题描述】：

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

  }
}

【问题讨论】：

    标签： reactjs webpack sass create-react-app node-sass


    【解决方案1】：

    TL;DR

    1. npm uninstall node-sass
    2. npm install sass

    或者，如果使用 Yarn

    1. yarn remove node-sass
    2. yarn add sass

    Edit3：是的，另一个编辑。迁移到 sass (dart-sass) 是最好的解决方案。前一个包括将 node-sass 锁定到 4.x.x 版本，该版本已有 2 年历史，缺乏更新的 SCSS 功能。

    Edit2：sass-loader v10.0.5 修复它。问题是您可能没有将它用作项目依赖项，而是更多地用作您的依赖项的依赖项。 CRA 使用固定版本，angular-cli 锁到 node-sass v4，等等。

    目前的建议是：如果您只安装 node-sass，请检查以下解决方法（和注释）。如果您正在处理一个空白项目并且可以管理您的 Webpack 配置（不使用 CRA 或 CLI 来构建您的项目），请安装最新的 sass-loader。

    编辑：此错误来自sass-loader。有一个 semantic versioning 不匹配，因为 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）is deprecated 和 dart-sass 是推荐的实现。 You can use sass instead，这是 dart-sass 编译成纯 JavaScript 的 Node.js 发行版。

    【讨论】：

    • 由于某种原因yarn add node-sass@4.14.1 更快
    • 看起来他们刚刚在 github.com/webpack-contrib/sass-loader/commit/… 中修复了这个问题，所以你可以安装 sass-loader@10.0.5
    • @TylikStec yarn 是另一个包管理器，但不要在同一个项目中同时使用两者，有两个锁文件可能会导致部署问题
    • @marcin 你说“他们”很有趣，因为发布答案的人就是修复它的人：]
    • 在一个类似于 OP 的全新 React 项目中，我有 "node-sass": "v5.0.0" 和 "sass-loader": "^10.1.0"，但问题仍然存在。我的节点版本是 15.3.0。当我卸载 node-sass 并重新安装 @4.14.1 时，问题仍然存在，因为我使用的是 Node 版本 15.3.0，它需要 node-sass 版本 5.0+。
    【解决方案2】：

    更新答案

    请注意 Node Sass 已贬值，您可以将其替换为 Dart Sass：

    警告：LibSass 和 Node Sass 已弃用。虽然他们将继续无限期地接收维护版本，但没有计划添加额外的功能或与任何新的 CSS 或 Sass 功能兼容。仍在使用它的项目应该转移到 Dart Sass。

    来源：https://www.npmjs.com/package/node-sass

    以下食谱对我有帮助：

    1. 卸载node-sass:
      • npm：npm uninstall node-sass
      • 纱：yarn remove node-sass
    2. 卸载sass-loader:
      • npm：npm uninstall sass-loader
      • 纱：yarn remove sass-loader
    3. 安装 Dart Sass 作为开发依赖
      • npm：npm install sass -dev
      • 纱：yarn add sass -dev

    在构建之前，您还应该：

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

    【讨论】：

      【解决方案3】：

      删除项目中的一个yarn.lock文件 和

      yarn remove node-sass
yarn add node-sass

      【讨论】：

        【解决方案4】：

        这个错误是由于 sass 加载器的版本与 node-sass 不兼容。

        在 package.json 文件的末尾添加这些依赖项。

        注意：您可以通过 google 查看哪个 sass-loader 版本与您的 node-sass 版本兼容。

        “开发依赖”：{ “节点萨斯”：“^6.0.1”， “sass-loader”：“^10.2.0” }

        【讨论】：

          【解决方案5】：

          否则重建你的 node-sass 以便兼容性不会产生错误。 当 node-sass 和 node 不兼容时，你会得到 typescript errors 。 这样做是为了实现 node-sass 兼容性。

          npm 重建节点-sass

          【讨论】：

            【解决方案6】：

            在 app.js 或任何要导入 css 的地方，请确保导入 css 而不是 scss。 package.json 中的脚本将创建一个 css 文件，这就是应该导入的内容。

                "scss": "node-sass --watch -include-path src/scss -o src/css"

            此脚本将监视 src 中名为 scss 的文件夹中的 scss 文件。然后它将在 src 中创建一个 css 文件夹并在该文件夹中添加一个 css 文件，这是您应该在 app.js 中导入的文件

            运行脚本：

            npm run scss

            文件结构示例： src/scss/styles.scss

            脚本创建的 CSS 文件： src/css/styles.css

            【讨论】：

              【解决方案7】：

              我遇到了同样的问题，下面是我解决它的方法：

              首先，您必须知道您在项目中使用的node-sass 版本。然后升级或降级你当前的 Node.js 版本到与你当前的node-sass 版本兼容的版本，你可以从this link 知道。

              当然，停止服务器，并关闭你的 IDE。

              所以，升级或降级 Node.js 版本的最佳方法，已在上面this answer 中提到。然后删除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>

              【讨论】：

                【解决方案8】：

                解决此问题的步骤：

                1. 转到您的 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”。

                这应该可行。

                【讨论】：

                  【解决方案9】：

                  这是版本问题。安装正确的依赖版本：

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

                  【讨论】：

                    【解决方案10】：

                    根据 Edit2 of Nicolas Hevia 的说法

                    sass-loader v10.0.5 修复了它

                    我启动了这个命令：

                    npm install sass-loader@^10.0.5 node-sass --save-dev

                    这解决了我的问题。

                    请注意，我处于开发环境中。在其他情况下，应删除选项--save-dev。

                    【讨论】：

                    • 这个答案解决了我的问题
                    【解决方案11】：

                    对我来说最好的解决方案是卸载 node-sass。

                    npm uninstall node-sass

                    然后安装 sass：

                    npm install sass

                    对于那些使用Yarn的人：

                    yarn remove node-sass
yarn add sass

                    【讨论】：

                    • node-sass 未在我的 package.json 中列出，甚至在尝试“yarn remove node-sass”之前。
                    • 你能解决这个问题吗？如果不是，也许您可​​以描述您所面临的问题，我们可以尝试制定解决方案。
                    【解决方案12】：

                    小更新：如果您收到以下关于 node-sass 的错误，请按照以下步骤操作。

                    代码 EPERM npm 错误！系统调用取消链接

                    解决问题的步骤：

                    1. 关闭 Visual Studio
                    2. 从 node_modules 中手动删除 .node-sass.DELETE
                    3. 打开 Visual Studio
                    4. npm cache verify
                    5. npm install node-sass@4.14.1

                    【讨论】：

                    【解决方案13】：

                    如果您碰巧将 CRA 与默认的 Yarn 包管理器一起使用，请使用以下内容。它对我有用。

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

                    【讨论】：

                      【解决方案14】：

                      您收到此类错误的唯一原因是您的 Node.js 版本与您的 node-sass 版本不兼容。

                      所以，请务必查看 node-sass 的文档。

                      或者下面这张图将帮助你决定哪个 Node.js 版本可以使用 node-sass 版本。

                      例如，如果您在 Windows 系统上使用 Node.js 版本 12（“可能”），那么您应该安装 node-sass 4.12 版。

                      npm install node-sass@4.12

                      是的，就像那样。所以现在你只需要安装node-sass团队推荐的node-sass版本，并在你的电脑上安装Node.js版本。

                      【讨论】：

                      • 使用这种方法，您将被锁定到 v4.x，而不是拥有最新版本的 v4。例如，即使节点 12 支持 4.14，它也会被 4.12 卡住。除非您使用npm install node-sass@^4.12，否则 npm update node-sass 将不起作用，这与安装 4.14.1（最新的 v4 版本）相同。
                      • 感谢您的回复 Nicolas Hevia，但我已经尝试过上面的代码，您是对的，如果我使用 npm install node-sass@4.12，它无法更新该版本的 node-sass。但是我一直在 nodejs 12.18.3 中尝试使用 node-sass 4.14.1，但它不起作用。这就是为什么我推荐使用 node-sass 团队推荐的版本，而我不使用 ^。因为会更新到node-sass 4的最新版本
                      • 这与其他建议相反。
                      • 这行得通，我在安装 node-sadd@4 时遇到了一些问题
                      • 但我的节点版本是v16.9.1 & node-sass 6.0.1 与该节点版本兼容
                      【解决方案15】：

                      卸载 node-sass：

                      npm uninstall node-sass

                      使用sass：

                      npm install -g sass
npm install --save-dev sass

                      【讨论】：

                      • 小心使用这种方法。 React-scripts 使用 sass-loader v8，它更喜欢 node-sass 而不是 sass（它有一些 node-sass 不支持的语法）。如果两者都安装了并且用户使用 sass，这可能会导致 css 编译出错。
                      • 另外，请注意全局安装。
                      • 避免全局安装项目特定的依赖项。在项目 repo 中，您始终可以使用 npx 示例 npx sass 引用本地依赖项。
                      • 我使用 node v14.15.3 和 node-sass 4.14.1，只有 sass 方法有效。卸载并重建 node-sass 或将其升级到 5.x 并不能解决问题。谢谢！
                      • 这是最好的答案，因为 webpack 强烈推荐使用Dart Sass
                      【解决方案16】：

                      添加 sass-loader 作为 dev-dependency 为我解决了这个问题。 "devDependencies": { "node-sass": "^6.0.0", "sass-loader": "^11.1.1" }

                      【讨论】：

                        【解决方案17】：

                        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

                        【讨论】：

                        • 即使在那个纱线解决方案之后，我得到 Node Sass 版本 6.0.1 与 ^4.0.0 不兼容 || ^5.0.0.
                        • @Erik Martines Sanches 从错误消息中可以看出 node sass 没有被卸载
                        • @ErikMartinesSanches 尝试在安装后重新启动您的节点服务器。
                        【解决方案18】：

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

                        【讨论】：

                          【解决方案19】：

                          使用 npm，

                          1. npm uninstall node-sass
                          2. npm install node-sass
                          3. 在package.json中将"react-scripts": "4.0.0"改成"react-scripts": "4.0.3"并保存
                          4. npm install
                          5. npm start

                          或者，使用纱线 -

                          1. yarn remove node-sass
                          2. yarn add --dev node-sass
                          3. 如上
                          4. yarn install
                          5. yarn start

                          【讨论】：

                          • 确认这适用于 Node 15 和 node-sass 5.0.0。
                          • 没有工作 缺少绑定 /Users/giz/code/genesislabs/client/node_modules/node-sass/vendor/darwin-x64-83/binding.node 节点 Sass 找不到您当前的绑定环境：OS X 64-bit with Node.js 14.x
                          【解决方案20】：

                          在添加特定版本的 node-sass 包 (node-sass@4.14.1) 后它对我有用

                          【讨论】：

                            【解决方案21】：

                            如果错误是

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

                            Step1：停止服务器

                            Step2：运行命令为npm uninstall node-sass

                            Step3：检查package.json中的node-sass，如果文件中有node-sass，则再次运行Step2。

                            Step4：npm install node-sass@4.14.1

                            Step5：等待命令成功运行。

                            第六步：使用npm start启动服务器

                            【讨论】：

                              猜你喜欢
                              • 2022-01-22
                              • 2021-08-25
                              • 2021-10-12
                              • 2022-12-19
                              • 2022-01-13
                              • 2022-06-24
                              • 2022-06-25
                              • 2021-11-18
                              • 2023-03-12
                              相关资源
                              最近更新 更多
                              热门标签
                              Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode