引导网格在导入组件SCSS文件时忽略断点

Question

将引导网格导入角度组件SCSS文件时，则HTML文件中的网格列断点被中断/忽略。

应用程序组件.scs

@import '../../node_modules/bootstrap/scss/bootstrap-grid';
// Some styles with media queries
@include media-breakpoint-up(sm) { ... }

app.component.html

<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div> <-- will be ignored (100%)
<div class="col-sm-4">col-sm-4</div> <-- will be ignored (100%)
</div>
</div>

意外行为：

网格列的显示宽度为100%，而不是66%和33%。开发工具(Computed)显示：_variables.css的规则覆盖了宽度属性的_grid.scss。

只需删除SCSS中的@import，网格就会按预期工作。但我也需要SCSS文件中的媒体查询来查找其他内容(完全独立于网格内容)。

环境：

• 角度15
• NG引导程序14(引导程序5.2.3)

Answer 1

解决方案

Bootstrap 5

导入以下SCSS文件(而不是bootstrap-grid)后，网格系统将再次正常工作。

您的组件.scs

// do not import this:
@import '../node_modules/bootstrap/scss/bootstrap-grid';
// instead import this:
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Some styles with media queries
@include media-breakpoint-up(sm) { ... }