只让 bootstrap css 在一个模块中工作

Question

我已经被这个问题困扰了好几个小时。我能找到的在线资源不多，可以解决目前面临的问题。 :( 在我的情况下，我有两个模块，home 和 admin。

我的主页依赖于引导 CSS 来工作。所以我在 index.html 中添加了 cdn 或 min.css 才能工作。主页工作正常。但是另一个模块中的管理页面也受到引导 CSS 的影响。

我尝试过使用 ng-bootstrap，并且只在我的 home.module.ts 中导入 NgBModule。但是现在 home 模块仍然没有得到引导 CSS。

我尝试过 index.html 链接

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous"> 

或

<link href="assets/home-style/css/bootstrap.min.css" rel="stylesheet"> 

两者都有效，但会影响所有页面和模块 CSS

我也尝试过使用 @ng-bootstrap/ng-bootstrap@4.1.0，但是使用它，我的主页甚至没有引导样式。也许我错误地使用了这个 npm 包。

home.module.ts

  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    NgbModule
  ],

尝试使用引导程序的主页示例

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
      </button>
      <a pageScroll class="navbar-brand page-scroll" href="#page-top">ilovou</a>
    </div>
  </div>
</nav>

Answer 1

您可以像这样直接导入顶部的组件 CSS/SCSS 文件，而不是将引导 css 样式文件添加到 index.html 文件中 -

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");