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

Question

我在许多.scss文件中导入~@angular/material/theming，以便我可以访问material颜色板。

在升级到Angular 9后，我一直收到以下构建警告：

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

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

- Richard Medeiros

---

你可以在angular.json文件中的projects-->architect-->build-->budgets-->maximunError处进行更改，例如：5mb（或者你需要的任何值）。 - Eliseo

我需要编辑 angular.json 中的 maximumWarning。路径为：projects > architect > build > configurations > (production,dev qa ...)> budgets > maximumWarning。 - DeanB_Develop

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。

- df1

---

谢谢！这对我有用。换句话说，你所需要做的就是将"@include"行与变量定义分开，并将它们移动到（其中一个）全局scss文件中。 - Moshe Kohavi

Answer 2

当我使用ng xi18n时，遇到了相同的错误。

尝试将你的 angular.json budgets 移动到：

architect.build.options.budgets

to:

architect.build.configurations.production.budgets

请查看Angular文档 https://angular.io/guide/build#configuring-size-budgets ：

在CLI配置文件angular.json中为每个配置的环境定义大小边界，可以在budgets部分中完成。

- Jonnefoy