angularjs - ブートストラップ 3 と 4 を一緒に使用するアプリケーションに競合があります

Question

ブートストラップ 3 と 4 を使用するアプリがあります。これは非常に大規模なアプリケーションであり、angular 1 と 2 の組み合わせに基づいて構築されており、Angular 1 アプリケーション用に記述された多数の scss ファイルが既にあります。

する必要がある：

これまでに書かれたすべての scss が、angular 1 ページに挿入される ng2-components に影響を与えないことを確認してください。

Angular 4/bootstrap 4 scss は現在の angular 1/bootstrap 3 に影響を与えるべきではありません

現在、angular 1 には、すべてのコンポーネント スタイルをインポートする main.scss ファイルがあります。

.ng1-app, *:not(.ng2-app){

  @import "bootstrap3";

  //override vendor theme of slick-carousel
  @import "fonts/slick-font";
  @import "components/slick-carousel";

  // Variables & Mixin
  @import "helpers/variables";
  @import "helpers/mixin";
  @import "helpers/typography";

  //Fonts
  @import "fonts/icon-font";
  @import "fonts/font";
  @import "fonts/icon-font-2";

  //Layout
  @import "layout/common";
  @import "layout/header";
  @import "layout/main";
  @import "layout/sidebar";

 // Components
 @import "components/navbar";
 @import "components/tabs";
 @import "components/checkbox";

}

angular 2 には、bootstrap 4 をインポートするための vendor.scss ファイルがあります。

.ng2-app, *:not(.ng1-app) {
  @import '../../../node_modules/bootstrap/scss/bootstrap4';
}

HTML での簡単な例:

<div class="ng-one">
 <p class="test">This is ng1 test</p>
 <div class="ng-two">
  <p class="test">This is ng2 test</p>
 </div>
</div>

angular1/2 とブートストラップ 3/4 を使用したハイブリッド アプリケーションの構築に関するリソースがほとんどないため、方向性を探しています。

ありがとう