webpack: "utoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated"

Viewed 670

I've simple webpack boilerplate with

main.scss

@import "~bootstrap/scss/bootstrap";

packages.json

"engines": {
    "node": "14.18.1",
    "npm": "6.14.15"
},
"devDependencies": {
    "@babel/core": "^7.17.12",
    "@babel/preset-env": "^7.17.12",
    "@popperjs/core": "^2.11.5",
    "babel-loader": "^8.2.5",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.8.2",
    "css-loader": "^6.7.1",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "jquery": "^3.6.0",
    "mini-css-extract-plugin": "^2.6.0",
    "postcss": "^8.4.13",
    "postcss-loader": "^6.2.1",
    "postcss-preset-env": "^7.5.0",
    "sass": "^1.51.0",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.3.0",
    "typescript": "^4.6.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
},
"dependencies": {
    "@fortawesome/fontawesome-free": "^6.1.1",
    "autoprefixer": "10.4.5"
}

on build i've this

Compiled with problems:X

WARNING in ./src/styles/main.scss (./src/styles/main.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss)

Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(2422:3) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
2 Answers

Try manually editing the bootstrap.min.css file in the node_modules folder. Replacing color-adjust with print-color-adjust. It helped me.

Just run this command in your terminal: npm install autoprefixer@10.4.5 –save-exact Your error should be solved.

You can also use this:

If you're using yarn:

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

If you're using npm:

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