How to make CSS class names unreadable with Angular CLI

Question

I found a Webpack module https://github.com/webpack-contrib/css-loader#css-modules which is able to rename class names and makes class names unreadable.

I found a SO answer here https://stackoverflow.com/a/14751344/5369031 but I am very curious how we can achieve the same thing in Angular CLI during ng build --prod ?

Unreadable means:

I am not sure if you can use a flag for it or not. I did not find anything from the docs: angular.io/cli/build. You could try the flag --optimization=true, but I don't know if that works. I have not read this github issue (github.com/angular/angular-cli/issues/10705) yet, but maybe it is of help. — John
– John, Commented Mar 13, 2019 at 7:14

German Quinteros · Accepted Answer · 2020-07-22 22:32:42Z

2

I was able to implement CSS Modules in an Angular 8 application (it's possible to do it in Angular 7 or higher too) customizing the build thanks to @angular-builders/custom-webpack and then using postcss-modules and posthtml-css-modules.

postcss-modules hash all the styles, then posthtml-css-modules replaces the class names on the html files by the hashed class names.

I documented my solution here:

I hope it will be useful for you.

answered Jul 22, 2020 at 22:32

German Quinteros

1,9401 gold badge12 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1