BootStrap 5.0 样式未在 Angular 中呈现

Question

我正在尝试在Angular 项目中使用BootStrap，并且能够使用项目索引文件中的以下内容在前端呈现样式：

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

到目前为止还不错，但试图在不引用索引文件 BootStrap with Angular 的情况下按照此链接呈现样式。所以在 angular.json 文件中添加了以下行：

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

我相信，这就是以前的链接所做的。我不确定我是否在这里错过了什么？我所做的是以下并且不呈现按钮样式：

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

Answer 1

您必须禁用encapsulation

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