Angular项目扩展Bootstrap样式触发CI/CD构建预算超限问题

在Angular项目中使用Bootstrap框架时，原先在多个用于包裹表单控件、对应标签及校验提示信息的元素上，直接应用Bootstrap的mt-4工具类。为实现样式语义化封装，将所有mt-4类全局替换为自定义业务语义类form-item，并在对应组件的SCSS文件中编写如下样式规则：

@use '/node_modules/bootstrap/scss/bootstrap-grid.scss';

.form-item {
  @extend .mt-4
}

上述代码在本地开发环境可正常构建、运行，但在CI/CD构建服务器执行构建时抛出如下错误：

Error: /app/src/app/views/xyz/xyz/xyz-edit.component.scss exceeded maximum budget. Budget 4.00 kB was not met by 47.68 kB with a total of 51.68 kB.

针对该问题的核心疑问如下：

1. 是否是当前配置的构建预算阈值设置过低（已知该参数支持自定义调整）？
2. 是否因为在单个组件SCSS文件中导入全量Bootstrap SCSS实现简单样式复用，导致文件体积过大？
3. 导入压缩后的Bootstrap CSS文件实现@extend复用的方案是否可行？
4. 是否需要定位mt-N间距类实际定义所在的细分SCSS模块，仅导入对应最小依赖？

补充说明：现有同类公开问题大多围绕Bootstrap主题定制展开，和本次需求存在差异：本次仅希望将重复使用的、绑定尺寸规则的工具类，封装为和业务使用场景匹配的语义化自定义类，无需做主题定制。

• 关于构建预算阈值：不建议优先调整阈值。Angular默认的4KB单组件样式预算是合理的防膨胀基线，当前单组件样式达到51.68KB、超出阈值12倍，本质是样式写法导致的冗余，不是阈值设置过低。盲目调大阈值只会掩盖单组件样式冗余的问题，拖慢页面加载性能。
• 关于导入全量Bootstrap SCSS的影响：这就是体积超限的直接原因。Angular组件样式默认开启视图封装，在单个组件的SCSS文件中导入整个bootstrap-grid.scss时，该文件包含的所有网格类、全量间距工具类、响应式规则都会被完整编译到当前组件的独立样式作用域中，不会和全局加载的Bootstrap样式共享代码，平白增加了近48KB的冗余代码。本地开发环境构建默认不做严格的单文件体积校验，所以不会报错，CI/CD走生产构建的体积检查流程就会触发超限报错。
• 关于导入压缩后Bootstrap CSS实现@extend的方案：完全不可行。@extend是Sass编译阶段的语法特性，只能识别Sass编译上下文中存在的选择器，压缩后的纯CSS文件无法被Sass解析提取选择器规则，不仅实现不了继承，还会直接抛出Sass编译错误。
• 关于导入最小依赖模块的思路：这是可行方向，但不是最优解。针对仅做语义化工具类封装、不定制主题的需求，按推荐优先级排序有三个合理实现方案：
  • 最优方案：直接给form-item写对应样式值。Bootstrap默认配置下mt-4对应的样式就是margin-top: 1rem，直接在form-item类中写该属性即可，零额外依赖、零冗余代码，还能实现业务样式和Bootstrap框架的完全解耦，后续就算替换CSS框架也不会影响表单元素的间距表现。
  • 次优方案：如果项目已经全局引入了完整的Bootstrap CSS，不需要在组件SCSS中导入任何Bootstrap源文件，直接写.form-item { @extend .mt-4 !optional; }即可。加上!optional标识后，就算编译上下文中找不到.mt-4的定义也不会报错，编译后的样式会自动复用全局已经存在的mt-4规则，不会产生冗余代码。
  • 最小依赖导入方案：如果一定要通过导入Sass模块实现继承，不要引入全量的bootstrap-grid.scss，只需要引入间距工具类依赖的三个核心模块：scss/_functions.scss、scss/_variables.scss、scss/utilities/_spacing.scss即可，最终编译出来的样式只会包含用到的间距规则，体积会控制在1KB以内，不会触发预算超限。

内容的提问来源于stack exchange，提问作者Green Grasso Holm