时间戳

首页 > 解决方案 > NG Bootstrap 封装问题

angular - NG Bootstrap 封装问题

问题描述

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

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

有没有办法使用Viewencapsulationfrom angular 或任何其他选项导入 ng-bootstrap？

标签： angularng-bootstrap

解决方案

这是一种解决方法：

  • 向您的组件添加一个类
  • 在全局范围内为该类创建一个条目
  • @import 该选择器内的引导程序
.mycomponent {  
    @import "~bootstrap/scss/bootstrap"; // would be better to specify which style to import instead of whole the bootstrap
}

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

推荐阅读