带有材质颜色的角度预算答案

【问题标题】：Angular budgets with Material colors带有材质颜色的角度预算
【发布时间】：2021-09-30 09:23:19
【问题描述】：

根据来自 Angular 的 configuration guide 关于 bugdet 大小的信息，我有 2kb 样式的预算。一旦我包含 Material 颜色主题，我的大小就会超过 14kb，即比预期的多 12kb。

根据 Material 的style guide，不同的调色板应该相互协调。

@use '~@angular/material' as mat;

@include mat.core();

$app-primary: mat.define-palette(mat.$indigo-palette);
$app-teal: mat.define-palette(mat.$teal-palette);

$app-theme: mat.define-light-theme($app-primary, $app-teal);
// Create a config with the default typography levels.
$config: mat.define-typography-config();
@mixin mix-app-theme($app-theme) {

  .mat-button-toggle-checked {
    background-color: mat.get-color-from-palette($app-teal, 400);
    // background-color: var(--mat-color-teal-400);
    color: mat.get-color-from-palette($app-teal, default-contrast);
  }
}

// Include the mixin
@include mix-app-theme($app-theme);

有没有办法遵循配置指南并且仍然可以使用不同的调色板？

【问题讨论】：

标签： angular material-design

【解决方案1】：

预算指南不是只针对组件样式吗？在...src/app/styles/_material_theme.scss 定义我的材料主题时，我没有收到这些警告。事实上，我的样式文件夹包含多个超过 2kb 限制且不会触发警告的 scss 文件（为清楚起见，这些文件都是 @imports 到我的 global.scss 文件中）。考虑在哪里定义主题文件。

此外，如果需要，您可以通过调整配置中的值来扩展警告/错误限制：


// angular.json

{
    "type": "anyComponentStyle",
    "maximumWarning": "2kb",
    "maximumError": "50kb"
}

【讨论】：