如何在Angular中排除Bootstrap CSS的视图封装？

我在Angular组件里导入了Bootstrap SCSS来使用它的变量和混合宏：

@import "node_modules/bootstrap/scss/bootstrap";

组件的HTML结构以标准Bootstrap元素为主，仅包含少量自定义CSS：

<div class="container container-fluid h-100">
    <div class="row h-100">
        <div class="col-3 h-100">

但Angular的视图封装机制会给Bootstrap类加上[_ngcontent-xxx]属性选择器，生成如下CSS，我希望能避免这种情况：

.h-100[_ngcontent-ukx-c19] {
    height: 100% !important;
}
.row[_ngcontent-ukx-c19] {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

想咨询是否能在保持组件视图封装启用的前提下，不让Bootstrap类被视图封装处理，同时还能在组件中导入Bootstrap使用它的变量和混合宏？

补充：当前使用指定版本的angular.json配置文件

方案一：全局加载Bootstrap样式，组件仅导入工具模块 #

这是最稳妥的实现方式：

1. 在全局样式文件（比如src/styles.scss）中完整导入Bootstrap SCSS，让基础类全局生效，不会被组件视图封装添加属性选择器：

@import "node_modules/bootstrap/scss/bootstrap";

2. 组件的SCSS文件里仅导入Bootstrap的变量、函数、混合宏等工具模块，不导入完整Bootstrap包，避免重复编译样式：

// 按需导入需要的工具模块
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

这样组件内可正常使用Bootstrap的变量和混合宏，而Bootstrap的类样式是全局生效的，不会被视图封装干扰。

方案二：用::ng-deep排除Bootstrap类的封装 #

如果必须在组件内导入完整Bootstrap，可以通过::ng-deep取消对Bootstrap类的视图封装：

@import "node_modules/bootstrap/scss/bootstrap";

// 列出需要排除封装的Bootstrap类
::ng-deep .container,
::ng-deep .row,
::ng-deep .col-3,
::ng-deep .h-100 {
    @content; // 保留Bootstrap原有样式
}

⚠️ 注意：::ng-deep属于Angular遗留特性，官方不推荐长期依赖，未来版本可能存在变更。

方案三：通过angular.json全局引入Bootstrap CSS #

直接在angular.json的styles数组中添加Bootstrap编译后的CSS文件，让Angular全局加载：

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
]

组件内仍可单独导入Bootstrap的SCSS工具模块使用变量和混合宏，同时Bootstrap的类样式不会被视图封装处理。

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