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

Question

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

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

警告超出了[.scss文件路径]的最大预算。预算6 kB未达到202kB，总计208kB。

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

Answer 1

除了~@angular/material/theming，mat-core()是否也意外导入？根据Angular Material文件：

这应该只包含在应用程序中一次如果多次包含此mixin，那么您的应用程序最终将获得这些常见样式的多个副本。

对于我的情况，我只想访问我自己的css文件中的$primary和$accent颜色。以下是我所做的：

创建一个_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.json的styles阵列中

@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-规模预算：

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