'Angular 8/Sass: Find unused css classes
I have an Angular project that uses Angular+Sass, and since the project became pretty big I am constantly finding unused small css classes that need to be removed. I am trying to find a way to remove them all, but for now nothing helped me.
I tried purifycss that didn't give me any output or error, ngx-unused-css that I cannot make it work since it has a framework error (path must be string not undefined), and I feel like I am out of options, and the coverage of Chrome that doesn't display any css files in it, and external sites are not an option since they won't have access to the deployed project location.
Is there some kind of tool or option that I can use to find all unused classes in Angular/Sass?
Solution 1:[1]
There are a lot of IDE plugins for that.
On my case I use https://marketplace.visualstudio.com/items?itemName=rcore.rcore-unused-css-classes from Visual Studio Code Extensions
Solution 2:[2]
Please try to use PurgeCSS to find out unused CSS in Angular project
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
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 | Pedro Bezanilla |
| Solution 2 | Yogesh Sonar |