Error: PostCSS plugin postcss-discard-comments requires PostCSS 8 in Angular 7
I have a small project with Angular version 7 and today I run ng serve --o command and I get an error PostCSS plugin postcss-discard-comments requires PostCSS 8. It still working well before.
Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\postcss\lib\processor.js:167:15)
at new Processor (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\postcss\lib\processor.js:56:25)
at postcss (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\postcss\lib\postcss.js:55:10)
at cssnanoPlugin (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\cssnano\dist\index.js:145:31)
at cssnanoMinify (eval at transform (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\css-minimizer-webpack-plugin\dist\minify.js:34:28), <anonymous>:51:33)
at minify (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\css-minimizer-webpack-plugin\dist\minify.js:15:32)
at Object.transform (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\css-minimizer-webpack-plugin\dist\minify.js:35:24)
at execFunction (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\jest-worker\build\workers\threadChild.js:158:17)
at execHelper (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\jest-worker\build\workers\threadChild.js:137:5)
at execMethod (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\jest-worker\build\workers\threadChild.js:141:5)
I tried to delete node_modules
folder and run npm install
command but it still does not work for me.
And below is my project environment.
Angular CLI: 7.3.9
Node: 14.17.5
OS: win32 x64
Angular: 7.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.13.9
@angular-devkit/build-angular 0.13.8
@angular-devkit/build-optimizer 0.13.8
@angular-devkit/build-webpack 0.13.8
@angular-devkit/core 7.3.9
@angular-devkit/schematics 7.3.9
@angular/cdk 7.3.3
@angular/cli 7.3.9
@angular/material 7.3.3
@ngtools/webpack 7.3.8
@schematics/angular 7.3.9
@schematics/update 0.13.9
rxjs 6.4.0
typescript 3.2.4
webpack 4.29.0
Thanks for any suggestions.
-
M5
Minh Yến Sep 01 2021
Run command below:
npm i postcss -D
And it fixed for me.
-
A2
Anand Pissey Aug 28 2021
You can try to delete
package-lock.json
file first and, open a terminal window then execute the below commands one by one.npm i --save autoprefixer@^10.0.2 npm i --save postcss@8.1.7 npm i --save postcss-loader@4.0.4
-
T0
Tuấn Dương Anh Aug 28 2021
Downgrade your
autoprefixer
to version 9, use"autoprefixer": "^9.0.0"
in your dev dependencies of
package.json
. -
J-1
Jide Aug 28 2021
Change your
package.json
config as below:"dependencies": { "autoprefixer": "^10.0.2", "postcss": "^8.1.7", "postcss-loader": "^4.0.4" }
And try to delete
node_modules
folder and runnpm install
.
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.