BootStrap Angular 中未呈现 5.0 样式

Question

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

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

到目前为止一切顺利，但试图按照此 link 渲染样式而不在索引文件 中引用。所以在 angular.json 文件中添加了以下行：

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

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

<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 {}