[SOLVED] How to exclude Bootstrap's CSS from encapsulation in Angular?

How to exclude Bootstrap's CSS from encapsulation in Angular?

Component imports Bootstrap to reference variables or mixins:

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

HTML contains custom CSS elements but mostly standard Bootstrap elements:

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

The view encapsulation generates CSS from Bootstrap classes, and I would like to avoid it:

.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));
}

Is it possible to exclude Bootstrap from View Encapsulation and still be able to import Bootstrap into a component with enabled Encapsulation?

EDIT: Here is used angular.json: https://github.com/maciejmiklas/ng-doom/blob/20230124/angular.json

Solution

It looks like it cannot be done. Here is a similar problem: Angular2: How to use bootstrap-sass with @extend and mixins in Angular-CLI?

As Eliseo pointed out - I have to remove bootstrap import from my component, which means I cannot use bootstrap imports inside components scss.