Question

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

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

我还希望在组件中使用此隔离的Bootstrap，而不必通过Angular的默认ViewEncapsulation复制生成的代码。这意味着我必须在组件中访问一些Bootstrap混合程序，例如make-col。

正确的方法是什么？

尝试：

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

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

示例：

legacy.html

r =30

for p in combinations(test4.index,r):
   den = np.mean(p)
   num = np.std(p)
   cv = num/den
if (den >= 561 and den <= 570 ) :
   if(cv>=0.13 or cv <= 0.17 and check1):
      check1=0
      print("Combination 1 done")

elif(den>=391 and den <= 400):
    if(cv>=0.13 or cv < 0.17 and check10):
       check10 = 0
       print("Combination 10 done")
if(check1+check10==0)
    break

styles.scss

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

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

// 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


}

有了该代码，我得到了

AOT警告“警告：无效的属性名称'.boostrap-namespace {”
生成的CSS中有重复的Bootstrap代码（一次在：root中，第二次在.boostrap-namespace：root中）

感谢您的帮助！

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

0 个答案: