ReactJs - 编译时带有警告答案

【问题标题】：ReactJs - Compiled with warningReactJs - 编译时带有警告
【发布时间】：2022-06-21 07:13:46
【问题描述】：

    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):

我在使用 reactjs(v18.1.0) 运行 react-bootstrap(v2.3.1 (Bootstrap 5.1)) 时遇到此警告。如何解决问题？

【问题讨论】：

您是否阅读了该消息并尝试按照它所说的去做？您在 CSS 中使用 color-adjust，应该使用 print-color-adjust。
提问前请阅读错误信息，不理解请先搜索错误信息github.com/twbs/bootstrap/issues/36259
我试过了，不行。
请提供有关您的设置的更多信息。你是如何引导你的项目的？你使用的是什么版本的 react 和 react-bootstrap？它是一个新鲜干净的项目还是你已经编写了一些代码？等等等等。
Azizur Rahman - 请写下你想做什么。在那个 Github 问题中，@andy-ray 提到他们写了如何修复它，至少是暂时的，在 Bootstrap 中的修复到来之前。

标签： reactjs react-bootstrap

【解决方案1】：

您可以将其添加到 package.json 中

第一步

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

第二步

纱线安装

** 如果你使用的是 npm

第一步

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

第二步

npm 安装

** 总结自https://github.com/twbs/bootstrap/issues/36259#issuecomment-1114855186

【讨论】：

AFAIU 这只是隐藏问题而不是解决问题。请参阅我的其他答案以获得修复：stackoverflow.com/a/72299465/473672

【解决方案2】：

将引导程序升级到 5.2.0 或更高版本。

Bootstrap 5.1.3 还是有这个问题。

在我输入此内容时，最新的 bootstrap 5.2.0 版本是 5.2.0-beta1，鉴于它的 beta 状态可能是也可能不是您想要升级到的东西，但 upgrading to that will at least solve this problem。

这里的根本原因是 bootstrap 生成的 CSS 带有已弃用的标签。请注意您的错误消息如何暗示引导程序：

    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)

【讨论】：

【解决方案3】：

即使升级到引导程序 5.2.0-beta1 对我来说仍然存在这个问题，并且在检查已安装的引导程序后，它似乎正在使用最新的自动前缀。我目前没有看到解决方案。如果有办法创建一个 js/tsx 文件来覆盖，那就太好了。

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review

【解决方案4】：

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

将此添加到 package.json：

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

删除package-lock.json

删除node_modules/目录

运行npm install 安装 npm 模块

【讨论】：