如何不修改文件大小上限，解决Angular构建样式超预算问题？

核心原因 #

你当前在组件SCSS中引入了全量Angular Material组件主题（mat.all-component-themes($theme)），导致单个组件样式文件体积远超anyComponentStyle的40kB预算限制。以下是几种可行的解决办法：

1. 将主题样式移到全局样式文件 #

组件样式会被Angular封装处理，全量主题代码放在组件内会导致冗余打包，且受单个组件的大小限制。正确的做法是把主题定义移到全局样式文件（如src/styles.scss）：

• 把你当前组件中的所有主题SCSS代码剪切到styles.scss
• 组件自身的SCSS只保留自定义组件样式，不再包含主题定义

2. 按需引入组件主题，而非全量引入 #

如果你不需要所有Material组件的样式，替换mat.all-component-themes($theme)为你实际使用的组件主题，比如你用到了按钮，就只保留按钮主题，再加其他用到的组件：

@use "@angular/material" as mat;

@include mat.core();

$primary: mat.define-palette(mat.$indigo-palette);
$accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400); 
$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

@include mat.core-theme($theme);
// 只引入你用到的组件主题，比如按钮、输入框等
@include mat.button-theme($theme);
// @include mat.input-theme($theme);
// @include mat.card-theme($theme);

3. 临时调整构建预算限制（应急方案） #

如果上述方法暂时无法实施，可以修改Angular的构建配置，放宽单个组件样式的大小限制：
打开angular.json，找到对应项目的build配置下的budgets数组，修改anyComponentStyle的maximumWarning和maximumError值：

"budgets": [
  {
    "type": "anyComponentStyle",
    "maximumWarning": "100kb",
    "maximumError": "100kb"
  }
]

注意：这只是临时解决，长期来看还是推荐按需引入或全局主题的方案，避免组件样式过度膨胀。

4. 使用CSS变量简化主题定义 #

Angular Material支持通过CSS变量直接应用主题，你可以直接在全局样式中引入预定义的indigo-pink.css，然后在组件中使用CSS变量：

• 在angular.json的styles数组中添加Material的预定义主题：

  "styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.scss"
  ]
  

• 组件中直接使用CSS变量，比如：

  .custom-button {
    background-color: var(--mdc-theme-primary);
    color: var(--mdc-theme-on-primary);
  }
  

内容的提问来源于stack exchange，提问作者Nerd Programmer