Angular budgets allow you to define size thresholds for your applications and for individual parts including stylesheets.
Using SASS can lead to blown budgets if we do not consider how stylesheets should be structured and imported in our components.
I’m using Bootstrap in my examples as it is a large library perfect for showcasing how budgets can be exceeded.
First, let’s view our style budgets in angular.json. Angular CLI sets these automatically when a new project is generated.
We’ll get a warning when styles exceed 2kb for any component and the build will fail when the size exceeds 4kb.
Senior Software Engineer, focusing on Frontend dev.