我有一个使用bootstrap 3和4的应用程序 . 它是一个非常庞大的应用程序,基于角度1和2的组合,我们已经为我们的角度1应用程序编写了很多scss文件 .

我需要:

确保到目前为止所写的所有scss都不会影响我们将插入角度为1页的ng2组件 .

Angular 4 / bootstrap 4 scss不应影响当前角度1 / bootstrap 3

目前对于角度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";

}

对于角度2,我们有一个vendor.scss文件来导入bootstrap 4:

.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和bootstrap 3/4构建混合应用程序的资源非常少 .

谢谢