如何使用 Bootstrap (v5) with.scss 文件设置最新的 Angular (v15)

Question

如何使用引导程序设置 Angular 和 SASS（.scss 文件）？

Answer 1

1. 下面将设置ng-bootstrap 。 这将允许您使用小部件，但不能按常规使用引导程序（将引导程序类应用于元素）

在 CLI 中输入：

ng new my-ng-bootstrap-app # Create angular app. Choose routing and SCSS options
ng add @ng-bootstrap/ng-bootstrap # add bootstrap (see notes at bottom of this answer for how bootstrap is added to app)
ng generate component my-flex # Create a new component to test bootstrap's flex styles
ng serve # Run the Angular server

这将导致 Angular（我认为从 v14 开始）的更高版本中出现错误。 通过替换解决此问题：

./src/styles.scss

// @import '~bootstrap/scss/bootstrap';
// Replace above line with
@import 'node_modules/bootstrap/scss/bootstrap';

现在bootstrap设置好了，我们可以go到https://getbootstrap.com/docs/5.0/layout/grid/复制代码。

src/app/my-flex/my-flex.component.html

  <!-- Replace the code in here with the example code from https://getbootstrap.com/docs/5.0/layout/grid/#example -->
<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

src/app/app.component.html

<!-- Delete all previous code -->
<app-my-flex></app-my-flex>

那应该是一切正常。 您可以检查浏览器中的开发人员工具，以查看呈现的 DOM 元素是否应用了引导程序 styles。

2. 为了以常规方式使用引导程序，请遵循以下说明： https://stackoverflow.com/a/75056081/11664580

---

（仅供参考） ng add @ng-bootstrap/ng-bootstrap将以下内容添加到：

源代码/styles.scss

/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';

src/app/app.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...
@NgModule({
  ...
  imports: [
    ...
    NgbModule
  ],
  bootstrap: [AppComponent]
})