Angular 15编译器莫名生成多余.h3 CSS规则问题咨询

这不是Angular编译器的Bug，大概率是你项目中引入的Bootstrap（或依赖了Bootstrap SCSS工具类的库）在起作用。

Bootstrap的SCSS内置了h1-h6混入，它的设计目的是让标题标签（比如h3）和对应的类（比如.h3）共享相同样式。当你的SCSS代码嵌套了标题选择器时，这个混入会自动把选择器扩展成同时包含标签和类的形式，也就是你看到的.features-icon-box h3,.features-icon-box .h3。

验证方式 #

检查项目的styles.scss（或全局样式文件）里有没有类似这样的导入：

@import "bootstrap/scss/bootstrap";

或者某个依赖包间接引入了Bootstrap的SCSS工具模块。

解决办法 #

• 如果不需要Bootstrap的这个特性，直接移除全局样式中对Bootstrap SCSS的导入即可。
• 如果需要保留Bootstrap，但不想让标题选择器被自动扩展，可以在导入Bootstrap前覆盖这个混入：

  // 先覆盖h1-h6混入，取消类选择器生成
  @mixin h1-h6($selector) {
    #{$selector} {
      margin-top: 0;
      margin-bottom: $headings-margin-bottom;
      font-weight: $headings-font-weight;
      line-height: $headings-line-height;
      color: $headings-color;
    }
  }
  
  // 再导入Bootstrap
  @import "bootstrap/scss/bootstrap";
  

• 或者直接避免嵌套写法，把SCSS改成：

  .features-icon-box h3 {
    // nice-styles
  }
  

内容的提问来源于stack exchange，提问作者Ernesto Alfredo