导入~@angular/material/theming时超出最大预算时出现警告

Question

我将~@angular/ material /theming导入到我的许多.scss文件中，这样我就可以访问材质调色板。

在更新到Angular 9之后，我得到了以下构建警告：

警告超出了的最大预算.scss文件路径..

预算6 kB达不到202个kB，总共208个kB。

大部分预算溢出来自于导入~@angular/material/theming。增加预算可以吗？angular.json~2-500kB，这样做的缺点是什么？

Answer 1

除此之外~@angular/material/theming，是mat-core()也是意外导入的吗？根据角度材料document](https://material.angular.io/guide/theming)

这应该只包含在您的应用程序中一次。如果多次包含此mixin，您的应用程序将以这些常见样式的多个副本结束。

对于我的例子，我只想访问$primary和$accent在我自己的css文件中的颜色。下面是我所做的：

创建_variables.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.jsonsstyles数组

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

然后一切都会正常工作，而不会使编译后的css膨胀。

Answer 2

同样的错误也发生在我使用ng xi18n尝试移动您的angular.jsonbudgets来自：

architect.build.options.budgets

至：

architect.build.configurations.production.budgets

检查角度文档https://angular.io/guide/build#configuring-size-budgets：

在CLI配置文件angular.json中为每个已配置环境的预算部分定义您的大小界限。