react-bootstrap 自动前缀警告答案

【问题标题】：react-bootstrap autoprefixer warningreact-bootstrap 自动前缀警告
【发布时间】：2022-06-19 08:49:24
【问题描述】：

autoprefixer：将颜色调整替换为打印颜色调整。强文本颜色调整速记目前已弃用。我在这里使用 react-bootstrap 但是当我运行我的代码时它会显示一些警告

这是我运行反应代码时的编译警告

   Compiled with warnings.

   Warning
   (6:29521) autoprefixer: Replace color-adjust to print- 
   color-adjust. The color-adjust shorthand is currently 
   deprecated.

   Search for the keywords to learn more about each 
    warning.
    To ignore, add // eslint-disable-next-line to the line 
    before.

   WARNING in ./node_modules/bootstrap/dist/css/bootstrap.min.css 
   (./node_modules/css- 
   loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss- 
   loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map- 
   loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css)
   Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
   Warning

   (6:29521) autoprefixer: Replace color-adjust to print-color-adjust. The color- 
   adjust 
   shorthand is currently deprecated.

    webpack compiled with 1 warning

我的 package.json 文件是：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
      "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.1.3",
     "react": "^18.1.0",
     "react-bootstrap": "^2.3.1",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
  "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
      "extends": [
          "react-app",
          "react-app/jest"
       ]
    },
   "browserslist": {
      "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
       ],
       "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
}

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

这是来自 Autoprefixer 的行为。我不确定这是错误还是功能，但我知道 Autoprefixer 10.4.5 没有这种行为。

将此添加到您的 package.json 并运行 npm install：

 "overrides": {
    "autoprefixer": "10.4.5"
  }

（免责声明：这在 Angular 13 中对我有用）

【讨论】：

【解决方案2】：

./node_modules/bootstrap/dist/css/bootstrap.min.css

使用 cmd + click 或 crtl + click 访问链接

只需将颜色调整更改为打印颜色调整（cmd + f 或 crtl f）

npm install && 错误已修复

【讨论】：

【解决方案3】：

如果您使用 yarn，请将以下内容添加到 package.json 并运行 yarn:

"resolutions": {
    "autoprefixer": "10.4.5"
}

如果您使用的是 npm，请将以下内容添加到 package.json 并运行 npm install:

"overrides": {
    "autoprefixer": "10.4.5"
}

完成后，重新启动应用程序。

【讨论】：

【解决方案4】：

那是引导问题。已经是fixed。修复将出现在下一个版本中。

【讨论】：

【解决方案5】：

如果您更改“react-scripts”版本，则不会出现警告。 “反应脚本”：“^4.0.1”

【讨论】：

【解决方案6】：

您可以删除 package-lock.json/yarn.lock 并将 react-bootstrap 安装为全局包。

yarn global add react-bootstrap

npm install react-bootstrap -g

然后只需从项目中的包中导入组件即可。

【讨论】：

【解决方案7】：

第一次问题仍然存在，即使将其添加到 package.json。还要重新安装节点模块，还要清理 node_module 文件夹。但是编译我的源代码后，所有的错误都不再出现了。

  ...
    "overrides": {
        "autoprefixer": "10.4.5"
    },
    "resolutions": {
        "autoprefixer": "10.4.5"
    }

【讨论】：

【解决方案8】：

我遇到了这个问题，适合我的解决方案是运行

npm install bootstrap@5.2.0-beta1

这个版本的引导程序可以解决问题！ :D

【讨论】：

【解决方案9】：

这些答案都不起作用。编辑 ./node_modules 内容绝对是个坏主意，因为它不会在开发阶段持续存在。在所有情况下都必须有一种外部方法来转换单词 color-adjust=print-color-adjust。也许是 postcss.config.js/tsx 或类似的想法。

【讨论】：

【解决方案10】：

简单地设置覆盖对我不起作用。我确实经历了以下步骤：

将此添加到package.json:

“覆盖”：{ “自动前缀”：“10.4.5” }
删除 package-lock.json
删除node_modules/目录
运行npm install 安装 npm 模块

【讨论】：