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

user_18961814 0
Viewed 31189

I am getting this error how to solve it ?

I tried by installing this then also I am getting the problem

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

reactjs css html javascript
9 Answers

Add following line in package.json:

If you're using yarn:

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

If you're using npm:

"overrides": {
    "autoprefixer": "10.4.5"
}
user_137785200
user_53216600
user_148959850

This issue is because of Autoprefixer v10.4.6+ color-adjust deprecation and it's replaced with print-color-adjust. It's currently fixed by Bootstrap v5.2.0-beta1. So you can update your Bootstrap version:

npm i bootstrap@5.2.0-beta1

Or, just override Autoprefixer plugin and downgrade it to previous version "10.4.5":

  1. In package.json of your react app, add the following section after the dependencies: {...}
"overrides": {
    "autoprefixer": "10.4.5"
 }

  1. Run the command npm install

  2. And finally npm start

user_56322550

For Rush.js users, you'll want to add these to your common/config/rush/common-versions.json:

  "preferredVersions": {
    "autoprefixer": "10.4.5",
    "postcss-preset-env": "7.4.3"
  },

because the latest version of postcss-preset-env (which is in turn required by react-scripts: "5.0.0") requires "autoprefixer": "10.4.5"

user_15191990

Go to ./node_modules/bootstrap/dist/css/bootstrap.min.css and Replace color-adjust to print-color-adjust and enter code here and type npm install autoprefixer@10.4.5 --save-exact This worked for me

user_189629200

You can do this:

yarn add bootstrap@5.2.0-beta1

It worked for me.

user_197405170

I think this error is because of the existence of both bootstrap and tailwind.

I just remove bootstrap, and the error disappears.

user_152553310

go to \node_modules\bootstrap\dist\css\bootstrap.css, usually in the line 2482, edit

color-adjust: exact;

to

print-color-adjust: exact;

user_193513370
Related