NG Bootstrap 封装问题答案

【问题标题】：NG Bootstrap encapsulation issueNG Bootstrap 封装问题
【发布时间】：2020-08-14 10:30:54
【问题描述】：

我将 ng-boostrap (v7.0.0) 与 Angular (v10) 一起使用，我在封装 Bootstrap 以用于使用 ng-bootstrap 手风琴的组件时遇到了一些问题。

基本上只有当我将@import "~bootstrap/scss/bootstrap" 放入全局文件styles.scss 时，css 才有效。但是，我只想在组件mycomponent.scss 文件中导入它，因为此应用程序将发布包含当前使用引导程序 3 的网页，如果我将其全局导入而不是本地导入，它会弄乱整个网页。

有没有办法使用 Viewencapsulation 从角度或任何其他选项导入 ng-bootstrap？

【问题讨论】：

标签： angular ng-bootstrap

【解决方案1】：

这里有一个解决方法：

为您的组件添加一个类
在全局范围内为该类创建一个条目
@import 该选择器内的引导程序

.mycomponent {  
    @import "~bootstrap/scss/bootstrap"; // would be better to specify which style to import instead of whole the bootstrap
}

您可以在SO question 中找到更多方法。

【讨论】：