angular - 如何在 Angular 中将 Bootstrap 4 与 SASS 一起使用

Question

我想在使用 Angular CLI 创建的 Angular(4+) 项目中使用 Bootstrap 4 和 SASS。

我特别需要:

使用 SASS 而不是 CSS 作为全局样式和组件样式

将 Bootstrap SASS 源代码与我的自定义 *.scss 样式一起编译

确保我的自定义样式覆盖 Bootstrap 源，以便我可以在需要时覆盖 Bootstrap 源，而无需编辑 Bootstrap 源本身(使升级 Bootstrap 源版本变得容易)

每当我的任何 *.scss 文件更改(组件和全局样式)到 ng serve 时，添加监视和自动重新编译脚本

Answer 1

为了使用 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']
通过这种方式，angular-cli 将在您执行诸如 ng serve 之类的命令时，在这些文件发生更改时自动监视并重新编译这些文件。 .

3) 添加 bootstrap 4

通过 npm 安装 Bootstrap 4:
npm install bootstrap --save
现在将 Bootstrap 添加到 angular-cli.json styles 中的配置数组(在任何其他自定义 css/scss 文件之前，以便让它们覆盖 bootstrap 规则:

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

这样，Bootstrap 4 源代码将保持干净，并且在发布新版本时很容易升级。

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

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

我的建议是引用单个 main.scss包含所有自定义 SASS 样式的文件:例如 _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 的替代品。

有一些项目允许您使用 Bootstrap 没有 jQuery .

两个例子:

ngx-bootstrap

ng-bootstrap

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

使用旧 Angular CLI 的说明

警告 : 我不会再保留这部分的答案，所以继续阅读它，我推荐给 update your Angular CLI version并按照上述说明进行操作。

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

跑:
ng set defaults.styleExt scss
这会影响您的 .angular-cli.json配置文件 ( example )。

注意:如果您是从头开始，您可以使用 Angular CLI 创建一个新项目: ng new my-project --style=scss这相当于正常创建一个新项目，然后运行上面提到的命令。

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

为此，您只需将样式文件从 .css 重命名即可。至 .scss并更改 @Component({ ... })相应的配置:
styleUrls: ['./my-component.scss']
( example )。

通过这种方式，angular-cli 将在您执行诸如 ng serve 之类的命令时，在这些文件发生更改时自动监视并重新编译这些文件。 .

3) 添加 bootstrap 4

通过 npm 安装 Bootstrap 4:
npm install bootstrap --save
现在将 Bootstrap 添加到 .angular-cli.json styles 中的配置数组(在任何其他自定义 css/scss 文件之前，以便让它们覆盖 bootstrap 规则:

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

( example )。

这样，Bootstrap 4 源代码将保持干净，并且在发布新版本时很容易升级。

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

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

我的建议是引用单个 main.scss包含所有自定义 SASS 样式的文件:例如 _variables.scss对于您的自定义变量， _global.scss用于全局规则等的文件。( example )。

所以在您的 .angular-cli.json您将仅引用一个自定义 main.scss文件:

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

它内部包含您所有的自定义全局* SASS 代码:

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

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

5) 包括 Bootstrap JavaScript 和 jQuery 的替代品。

有一些项目允许您使用 Bootstrap 没有 jQuery .

两个例子:

ngx-bootstrap

ng-bootstrap

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