NG Bootstrap encapsulation issue

user_4486549 0
Viewed 197

I am using ng-boostrap (v7.0.0) together with Angular (v10) and I am having some problems to encapsulate Bootstrap to be used in a component where a use an accordion from ng-bootstrap.

Basically the css works only if I put @import "~bootstrap/scss/bootstrap" in the global file styles.scss. However, I want to import it only in the component mycomponent.scss file as this application will be published consist of a webpage that is currently using bootstrap 3 and if I import it globally instead of importing it locally, it messes up the complete webpage.

Is there a way to import ng-bootstrap using Viewencapsulation from angular or any other option?

ng-bootstrap angular
1 Answers

Here is a workaround:

  • add a class to you component
  • in the global scope create an entry for that class
  • @import the bootstrap inside that selector
.mycomponent {  
    @import "~bootstrap/scss/bootstrap"; // would be better to specify which style to import instead of whole the bootstrap
}

You can find some more approaches in this SO question.

user_3901610
Related