CODEWITHSUNDEEP
javascriptangularwebpackangular-cli
Arpit Kumar
Arpit Kumar

Reputation: 2249

How to make CSS class names unreadable with Angular CLI

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:

enter image description here

Upvotes: 2

Views: 1458

Answers (1)

German Quinteros
German Quinteros

Reputation: 1930

What https://github.com/webpack-contrib/css-loader#css-modules does is enabling CSS Modules.

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.

Upvotes: 2

Related Questions