安装autoprefixer出现color-adjust废弃警告需替换为print-color-adjust

云原生阿岚

2026-8-31

问题背景

安装autoprefixer@10.4.5时执行的安装命令为：

npm install autoprefixer@10.4.5 --save-exact

编译阶段postcss-loader抛出如下警告，最终webpack统计到1条相关警告：

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

警告核心原因：W3C已废弃color-adjust简写属性，标准写法替换为print-color-adjust，当前项目中Bootstrap的压缩CSS文件仍在使用旧属性，被新版autoprefixer检测到后抛出提示。

解决方法

按推荐优先级从高到低排列：

升级Bootstrap到修复版本
Bootstrap官方在v5.1.3及以上版本已经完成属性替换，直接升级Bootstrap到最新稳定版即可从根源解决问题，执行命令：
```
npm install bootstrap@^5.2.0
```
升级后重新执行编译命令，警告会自动消失。
回退autoprefixer版本
该警告是autoprefixer 10.4.5版本新增的检测规则，如果暂时不能升级Bootstrap，可以将autoprefixer回退到上一个稳定版10.4.4，该版本不会检测该条废弃属性：
```
npm install autoprefixer@10.4.4 --save-exact
```
配置autoprefixer忽略该条警告
如果既不想升级Bootstrap也不想改动autoprefixer版本，可以修改项目下的postcss配置文件（通常是postcss.config.js），添加规则关闭该特定警告，配置参考：
```
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ["> 1%", "last 2 versions", "not dead"],
      warnings: {
        "color-adjust": false
      }
    }
  }
}
```
如果是使用Create React App创建的未eject项目，可以借助craco或者react-app-rewired覆盖postcss配置实现同样效果。
临时手动替换文件内容
本地调试阶段如果不想改动依赖，可以直接打开node_modules/bootstrap/dist/css/bootstrap.min.css文件，全局搜索color-adjust替换为print-color-adjust即可。注意该操作会在下次执行npm install后失效，不推荐在生产环境使用。

内容的提问来源于stack exchange，提问作者ZebraCoder