BootStrap 5.0 Styles Not Rendered in Angular-CodePudding

I am trying to use BootStrap in an Angular project and was able to render the styles in front-end using the following in the index file of the project:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

So far good but was trying to follow this link to render the styles without referencing in the index file BootStrap with Angular. So added the following line in the angular.json file:

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

I believe, this is what the previous link used to do. I am not sure if I had missed something here? What I did is the following and doesn't render the button style:

<button type="button" class="btn btn-primary">Add</button> //Though the class name doesn't show while writing

CodePudding user response：

You must disable encapsulation

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {}