如何在 Angular 中排除 Bootstrap 的 CSS 封装？答案

【问题标题】：How to exclude Bootstrap's CSS from encapsulation in Angular?如何在 Angular 中排除 Bootstrap 的 CSS 封装？
【发布时间】：2023-01-23 17:24:05
【问题描述】：

Component 导入 Bootstrap 来引用变量或 mixin：

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

HTML 包含自定义 CSS 元素，但主要是标准的 Bootstrap 元素：

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

视图封装从 Bootstrap 类生成 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));
}

是否可以从 View Encapsulation 中排除 Bootstrap，并且仍然能够将 Bootstrap 导入到启用了 Encapsulation 的组件中？

【问题讨论】：

标签： angular angular-bootstrap

【解决方案1】：

angular.json 中有一个名为 build->options->styles 的部分。那里列出的样式不会被封装

【讨论】：