时间戳

首页 > 解决方案 > 带有材质颜色的角度预算

angular - 带有材质颜色的角度预算

问题描述

根据 Angular 关于 bugdet 大小的配置指南，我有一个 2kb 样式的预算。一旦我包含了 Material 颜色主题，我的总大小就会超过 14kb - 即比预期的多 12kb。

根据Material风格指南，不同的调色板应该相互协调。

@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);

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

标签： angularmaterial-design

解决方案

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

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


// angular.json

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

推荐阅读