如何在 Angular 中使用带有 SASS 的 Bootstrap 4

为了使用 SASS 设置 Angular + Bootstrap 4，我们只需要配置 Angular CLI 并安装 Bootstrap 4 npm 包。无需安装任何 SASS 编译器，因为它已经包含在内。

编辑：此答案已更新，可与较新版本的 Angular CLI 一起使用（已在 6.1.3 版中测试）。我在此答案的底部留下了旧 Angular CLI 的说明，但我强烈建议您update your Angular CLI version。

使用新 Angular CLI（版本 6 或更高版本）的说明

1) 将 Angular CLI 配置为使用 SASS 而不是 CSS

- 在现有项目上：

编辑您的 angular.json 文件并将 "styleext": "scss" 键值添加到 projects.PROJECT_NAME.schematics.@schematics/angular:component 对象。

它应该是这样的：

{
  // ...
  "projects": {
    "PROJECT_NAME": {
      // ....
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
  // ...
}

- 创建新项目时

只需使用：

ng new my-project --style=scss

2）将现有的组件样式从 CSS 更改为 SASS（如果有）

为此，您只需将样式文件从 .css 重命名为 .scss 并相应地更改 @Component({ ... }) 配置：

styleUrls: ['./my-component.scss']

这样，当您执行 ng serve 之类的命令时，只要这些文件发生变化，angular-cli 就会自动监视并重新编译这些文件。

3) 添加引导程序 4

通过 npm 安装 Bootstrap 4：

npm install bootstrap --save

现在将 Bootstrap 添加到 styles 数组内的 angular-cli.json 配置中（在任何其他自定义 css/scss 文件之前，以便让它们覆盖引导规则：

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

这样，Bootstrap 4 源代码将保持干净，并且每当发布新版本时都可以轻松升级它。

4) 添加您的自定义（全局）SASS 文件

可以在 app/assets/scss 下添加应全局影响项目的任何其他 SASS 样式（与单个组件样式不同），然后在 angular-cli.json 的 styles 数组中引用。

我的建议是引用一个包含所有自定义 SASS 样式的 main.scss 文件：例如，用于自定义变量的 _variables.scss、用于全局规则的 _global.scss 文件等。

因此，在您的 angular-cli.json 中，您将只引用一个自定义 main.scss 文件：

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "src/assets/scss/main.scss"
],

其中包含您所有的自定义全局* SASS 代码：

// main.scss 
@import "variables";
@import "global";
// import more custom files...

*请注意，您不得在此处包含单个组件的 *.scss 样式文件。

5) 包括对 Bootstrap JavaScript 和 jQuery 的替换。

有一些项目允许您在没有 jQuery 的情况下使用 Bootstrap。

两个例子：

ngx-bootstrap

ng-bootstrap

此处讨论这两个项目之间的区别：What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

使用旧 Angular CLI 的说明

警告：我将不再保留这部分答案，因此要继续阅读它，我建议update your Angular CLI version并按照上述说明进行操作。< /em>

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

// main.scss 
@import "variables";
@import "global";
// import more custom files...