autoprefixer：将颜色调整替换为打印颜色调整。颜色调整简写目前已被弃用

Question

我安装autoprefixer并收到此警告：

npm install autoprefixer@10.4.5 --save-exact

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

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

webpack compiled with 1 warning

Answer 1

添加以下行package.json：

如果您使用的是纱线：

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

如果您使用npm：

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

Answer 2

解决方案是使用命令安装 bootstrap 5.2 beta

npm install bootstrap@5.2.0-beta1

Answer 3

此问题是由于Autoprefixer v10.4.6 +color-adjust 弃用而导致的，它被替换为print-color-adjust. 目前已由Bootstrap v5.2.0-beta1修复。所以你可以更新你的Bootstrap版本：

npm i bootstrap@5.2.0-beta1

或者，只需覆盖Autoprefixer插件并将其降级到以前的版本“10.4.5”：

1. 在React 应用程序的package.json中，在后面添加以下部分dependencies: {...}

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

2. 运行命令npm install

3. 最后npm start

Answer 4

我遇到了这个错误，但与 Bootstrap 无关。它与 Next.js / Tailwind CSS 一起使用。

我收到此错误：

warn  - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./src/styles/globals.css
Warning
(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./src/styles/globals.css

作为Next.js tailwind 安装的一部分，tailwind 建议使用postcss和进行安装autoprefixer。

我已经更新了postcss和autoprefixernpm 软件包，但仍然收到此错误。

为了解决这个问题，我需要更新所有的 tailwind 插件。

以下是如何升级 tailwind css 插件的示例，这是执行整个 tailwind 安装：

warn  - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./src/styles/globals.css
Warning
(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./src/styles/globals.css