2

我有一个使用 bootstrap 3 和 4 的应用程序。它是一个非常庞大的应用程序，建立在 angular 1 和 2 的组合之上，我们已经为我们的 angular 1 应用程序编写了很多 scss 文件。

我需要：

确保到目前为止编写的所有 scss 都不会影响将插入到 angular 1 页面中的 ng2 组件。

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，我们有一个 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 构建混合应用程序的资源很少。

谢谢

4

0 回答 0