Managing your Angular style budgets

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.

We add Bootstrap to our global stylesheet along with other global classes our project requires.

In one of our components we want to use $primary defined in Bootstrap so we import the global stylesheet in our component.

We build the app and get an error message telling us we’ve blown our budget.

Error: /budgets/src/app/component1/component1.component.scss exceeded maximum budget. Budget 4.00 kB was not met by 146.92 kB with a total of 150.92 kB.

We’ve imported over 140kb of CSS into our component just to use one variable. If the build had compiled, the styles in the compiled component would have looked something like this.

If we require variables in many components then our application size will increase exponentially, as the styles will be added to each individual component.

To fix this we should move variable definitions into a separate file from any other style definitions. Fortunately, Bootstrap has a variable file we can use. Here’s a snippet of that file.

Now we import only the variables.

We build our code, no budget warnings or errors occur and the compiled component styles look like this.

Note: only the variables used in your component are compiled.

If you have a large project with many variables you may not want them all defined in one file. You could create variable files for your separate style concerns like typography, palettes, layouts etc and use the forward rule in your variables.scss file. This means you still only have one file that needs to be imported wherever any variables are required.