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.

Brett Upton

Senior Software Engineer, focusing on Frontend dev.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store