时间戳

首页 > 解决方案 > 导入时超出最大预算警告 ~@angular/material/theming

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

问题描述

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

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

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

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

标签： angularangular-material

解决方案

另外~@angular/material/theming，mat-core()也是不小心进口的？根据角材料文件：

这应该只包含在您的应用程序中一次。如果这个 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。

推荐阅读