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

Question

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

generally, when you use bootstrap.css you want to use in all your application, so you should add in angular.json. in the array "styles": "projects" --> "ClientApp" --> "architect" --> "build" --> "styles" — Eliseo
– Eliseo, Commented Jan 23, 2023 at 9:08
I feel you need not import node_modules/bootstrap/scss/bootstrap in your components.css — Eliseo
– Eliseo, Commented Jan 24, 2023 at 7:00

Andrei · Accepted Answer · 2023-01-23 08:53:11Z

0

there is a section in angular.json called build->options->styles. styles listed there won't be encapsulated

answered Jan 23, 2023 at 8:53

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maciej Miklas Over a year ago

I have it there, and it's not working: github.com/maciejmiklas/ng-doom/blob/20230124/angular.json . Probably, because my component imports bootstrap, this is necessary to use its variables/mixins.

Maciej Miklas · Accepted Answer · 2023-01-25 08:11:01Z

0

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.

answered Jan 25, 2023 at 8:11

Maciej Miklas

3,3374 gold badges31 silver badges54 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related