'Remove Unused CSS on Angular 9 build process

I have an Angular 9 project which I added Bulma on angular.json > projects.projectName.architect.build.options.styles so it bundles up the framework on styles.css. The thing is that checking the coverage in Chrome I find this:

I tried PurgeCSS and PurifyCSS on their own, working on the "dist" folder and also integrating it using @angular-builders/custom-webpack but without luck.

Also tried: Angular 8/Sass: Find unused css classes and Angular CLI Webpack by AngularRU

I'm trying to keep everything within Angular's build process avoiding ng eject.

How do you do when deploying an Angular App to Production? Because I'm pretty sure I'm not the first that comes up with this problem.

Thank you in advance for any clue you can give me to solve this issue.

Solution 1:^[1]

Please try to use PurgeCSS

PurceCSS is a well-known tool that scans the output of the built CSS files and will use it's heuristics and extractors to remove unused CSS - predominantly brought to fame thanks to Tailwind.

Refer below link for your reference.

https://dev.to/dylanvdmerwe/reduce-angular-style-size-using-purgecss-to-remove-unused-styles-3b2k

Solution 2:^[2]

You can use ngx-unused-css to get all unused css from your application before building

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Yogesh Sonar
Solution 2	Oscar

'Remove Unused CSS on Angular 9 build process

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]