如何将Bootstrap CSS隔离至单个Angular组件？

我之前也碰到过一模一样的困扰——全局引入Bootstrap总会把其他不需要的组件样式搞乱，直接在目标组件的CSS里引入又完全不生效。结合Angular 5的样式封装机制，给你几个可行的解决方案：

方案一：用SCSS嵌套包裹（推荐） #

这个方法既能让Bootstrap只作用于目标组件，又不破坏Angular的样式隔离，前提是你的项目支持SCSS（Angular CLI默认支持，只要把组件样式后缀改成.scss就行）：

1. 先确保已经安装Bootstrap：npm install bootstrap --save
2. 把目标组件的样式文件改成.scss（比如target-component.component.scss）
3. 在这个SCSS文件里，用:host选择器把Bootstrap的引入包裹起来：

:host {
  @import '~bootstrap/dist/css/bootstrap.min.css';
}

:host代表当前组件的宿主元素，这样Bootstrap的所有样式都会被限定在组件内部，Angular会自动给这些样式加上组件专属的属性选择器，完全不会影响其他组件。

方案二：关闭组件样式封装（需谨慎使用） #

如果你的项目只能用CSS而不是SCSS，可以试试关闭目标组件的样式封装，但一定要给组件加一个唯一类名来限定样式范围：

1. 在组件的TS文件里，引入ViewEncapsulation并设置为None：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  styleUrls: ['./target-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class TargetComponentComponent {
  // 组件逻辑代码
}

2. 在组件的CSS文件里，用唯一类名包裹Bootstrap的引入：

.target-component-wrapper {
  @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
}

3. 最后在组件模板的根元素上加上这个类：

<div class="target-component-wrapper">
  <!-- 你的组件内容，这里面的元素就能正常使用Bootstrap样式了 -->
</div>

⚠️ 注意：关闭样式封装后，组件里的其他自定义样式也会变成全局的，所以一定要用类名包裹住所有样式，避免污染全局。

为什么直接在组件CSS里引入不生效？ #

Angular默认的ViewEncapsulation.Emulated会给组件内的所有元素添加一个专属的属性（比如_ngcontent-xxx），同时给组件样式里的选择器加上这个属性的限定。但直接引入的Bootstrap样式没有这个属性，所以无法匹配到组件内的元素，自然就不生效啦。

内容的提问来源于stack exchange，提问作者mjones