angular - 如何在 Angular 应用中封装 Boostrap 并避免重复代码？

Question

我正在构建一个使用 Bootstrap 4 的 Angular 7 应用程序。该应用程序将嵌入到旧网站中。

我的目标是在我的应用程序中也使用 Bootstrap，但隔离 Bootstrap 以避免与旧应用程序发生冲突（即 Bootstrap 4 仅影响旧应用程序内我的 Angular 容器的子级）

我还想在我的组件中使用这个隔离的 Bootstrap，而不需要通过 Angular 的默认 ViewEncapsulation 重复生成的代码。这意味着我必须在组件中访问一些 Bootstrap mixin，例如 make-col。

这样做的正确方法是什么？

试过：

• 在styles.scss（主应用程序scss）中，在命名空间下导入Boostrap（参见示例）
• 组件 SCSS：再次导入 Boostrap 并使用 mixin

但是这样做会从 AOT 生成警告（不知道我的命名空间）+ 它会在子组件中生成 Boostrap 代码的重复

例子：

遗留.html

<!-- in HTML legacy code -->
<div class='boostrap-namespace'>
      <app-root ></app-root>
</div>

样式.scss

// Global styles for entire Angular app
.boostrap-namespace {
  @import '~bootstrap/scss/bootstrap.scss';

.btn-outline-primary {
    @include button-outline-variant(
      $base-blue,
      $base-blue,
      $base-blue,
      $base-blue
    );
  }

// ... other css rules


}

subelement.component.scss - 生成重复的 Boostrap 代码

@import '~bootstrap/scss/bootstrap.scss';

@include media-breakpoint-up(md) {
  // 3 cards on tablet
  @include make-col(4);
}
// ... other component css rules


}

有了那个代码，我得到了

• AOT 警告“无效属性名称 '.boostrap-namespace { 中的警告”
• 在生成的 css 中重复引导代码（一次在 :root 中，第二次在 .boostrap-namespace :root 中）

谢谢你的帮助！

标签： angularsassbootstrap-4