Как инкапсулировать Boostrap в приложении Angular и избежать дублирования кода?

Question

Я создаю приложение Angular 7, которое использует Bootstrap 4. Это приложение будет встроено в устаревший веб-сайт.

Моя цель слишком использовать Bootstrap в моем приложении, но изолировать Bootstrap, чтобы избежать конфликтов с унаследованным приложением(т. е. Bootstrap 4 влияет только на дочерние элементы моего контейнера Angular внутри унаследованного приложения)

Я также хочу использовать этот изолированный Bootstrap в моих компонентах без дублирования сгенерированного кода с помощью стандартного ViewEncapsulation Angular.Что означает, что мне нужно получить доступ к компонентам некоторых миксинов Bootstrap, таких как make-col.

Как правильно это сделать?

Tried:

• Instyles.scss (основное приложение scss), чтобы импортировать Boostrap в пространстве имен (см. пример)
• Компонент SCSS: снова импортировать Boostrap и использовать mixin

Но при этом выдается предупреждение изAOT (не знает мое пространство имен) + генерирует дублирование кода Boostrap в подкомпоненте

Пример:

legacy.html

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

styles.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)

Спасибо за помощь!