ВНИМАНИЕ! Превышен максимальный бюджет при импорте ~ @ angular / material / theming

Question

Я импортирую ~ @ angular / material / theming во многие из моих файлов .s css, чтобы иметь доступ к цветовой палитре материалов.

После обновления до Angular 9 я получил следующее предупреждение о сборке:

ПРЕДУПРЕЖДЕНИЕ в Превышен максимальный бюджет для [.s css пути к файлу]. Бюджет 6 КБ не был выполнен 202 КБ с общим объемом 208 КБ.

Большая часть этого переполнения бюджета связана с импортом ~ @ angular / material / theming. Можно ли увеличить бюджеты в angular.json до ~ 2-500 КБ, каковы недостатки этого?

Answer 1

Кроме ~@angular/material/theming, mat-core() также был импортирован случайно? В соответствии с Angular Материальным документом :

Это должно быть включено только один раз в ваше приложение. Если этот миксин включен несколько раз, ваше приложение будет в итоге получим несколько копий этих общих стилей.

В моем случае я просто хотел получить доступ к цветам $primary и $accent в моих собственных файлах css. Вот что я сделал:

Создание _variable.scss, которое можно импортировать в любое место приложения

@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);

Создание theme.scss и добавление его в angular.json styles массив

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

И тогда все работает, не раздувая скомпилированный css.

Answer 2

Такая же ошибка произошла со мной при использовании ng xi18n

Попробуйте переместить angular. json budgets из:

architect.build.options.budgets

в:

architect.build.configurations.production.budgets

Проверьте angular документы https://angular.io/guide/build#configuring -size-бюджеты :

Определите границы размера в файле конфигурации CLI, angular. json в разделе бюджетов для каждой настроенной среды.