Angular组件SCSS导入Bootstrap Grid后网格断点失效求助

问题现象 #

在Angular 15、NG-Bootstrap 14（基于Bootstrap 5.2.3）的项目里，组件SCSS文件导入bootstrap-grid后，HTML中的col-sm-*这类网格断点类完全失效——列宽度始终是100%，而非预期的比例分配。开发者工具显示是_variables.scss里的规则覆盖了_grid.scss的width属性。移除SCSS里的@import语句后，网格功能恢复正常，但项目又需要保留Bootstrap的媒体查询混合器来实现其他自定义样式。

相关代码 #

app.component.scss #

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

// 需要保留的自定义媒体查询代码
@include media-breakpoint-up(sm) { ... }

app.component.html #

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div> <!-- 实际显示宽度100%，未按预期占66.666% -->
    <div class="col-sm-4">col-sm-4</div> <!-- 实际显示宽度100%，未按预期占33.333% -->
  </div>
</div>

解决方法 #

方案1：仅导入所需的变量与混合器 #

不需要导入整个bootstrap-grid包，只单独引入Bootstrap的变量文件和断点混合器文件，这样既能保留media-breakpoint-up这类工具的使用，又不会引入重复的网格样式导致冲突：

// 先导入Bootstrap核心变量
@import '../../node_modules/bootstrap/scss/variables';
// 导入媒体查询混合器
@import '../../node_modules/bootstrap/scss/mixins/breakpoints';

// 你的自定义媒体查询逻辑
@include media-breakpoint-up(sm) { ... }

方案2：全局导入Grid，组件内仅导入工具类 #

如果项目需要全局使用Bootstrap网格系统，建议在全局样式文件styles.scss中导入bootstrap-grid，组件SCSS里只引入变量和混合器即可：

// styles.scss（全局样式文件）
@import 'bootstrap/scss/bootstrap-grid';

// app.component.scss（组件私有样式）
@import '../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/mixins/breakpoints';

@include media-breakpoint-up(sm) { ... }

这种方式从根源避免了组件内重复导入网格样式，同时保证全局范围内的网格类都能正常生效。

方案3：强制提升网格类优先级（不推荐） #

如果必须在组件内导入bootstrap-grid，可以通过自定义类组合来提升样式优先级，覆盖冲突规则：

<div class="container custom-grid-wrap">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
</div>

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

// 用自定义父类提升优先级
.custom-grid-wrap .col-sm-8 {
  width: 66.66667% !important;
}
.custom-grid-wrap .col-sm-4 {
  width: 33.33333% !important;
}

@include media-breakpoint-up(sm) { ... }

不过这种方式依赖!important，会增加样式维护难度，优先推荐前两种方案。

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