WARNING in Exceeded maximum budget when importing ~@angular/material/theming

Question

I import ~@angular/material/theming into many of my .scss files so that I have access to material colour palets.

After updating to Angular 9, I've been getting the following build warning:

WARNING in Exceeded maximum budget for [.scss file path]. Budget 6 kB was not met by 202 kB with a total of 208 kB.

Most of this budget overflow is from importing ~@angular/material/theming. Is it ok to increase budgets in angular.json to ~2-500kB, what are the drawbacks of doing this?

Answer 1

Besides ~@angular/material/theming, was mat-core() also imported accidentally? According to Angular Material document:

This should only be included once in your application. If this mixin is included multiple times, your application will end up with multiple copies of these common styles.

For my case, I just wanted to access the $primary and $accent colors in my own css files. Here's what I did:

Create a _variables.scss, that can be imported anywhere throughout the app

@import "~@angular/material/theming";
$primaryPalette: mat-palette($mat-pink, 700);
$accentPalette:  mat-palette($mat-blue-grey, A200, A100, A400);
$warnPalette:    mat-palette($mat-red);

$theme: mat-dark-theme($primaryPalette, $accentPalette, $warnPalette);

$primary: map-get($theme, primary);
$accent: map-get($theme,accent);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);

Create a theme.scss, and add it into angular.json's styles array

@import "~@angular/material/theming";
@import "_variables";
@include mat-core();
@include angular-material-theme($theme);

And then everything works, without inflating the compiled css.

Answer 2

Same error happened to me when using ng xi18n

Try to move your angular.json budgets from:

architect.build.options.budgets

to:

architect.build.configurations.production.budgets

Check angular docs https://angular.io/guide/build#configuring-size-budgets :

Define your size boundaries in the CLI configuration file, angular.json, in a budgets section for each configured environment.