3

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:

unused css coverage

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.

EzeTeja
  • 1,125
  • 1
  • 13
  • 21

2 Answers2

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

Yogesh Sonar
  • 11
  • 4
-1

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

Oscar
  • 157
  • 1
  • 9
  • A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted](//stackoverflow.com/help/deleted-answers). – Tschallacka Jul 14 '20 at 15:26