如何在Angular中使用带SASS的Bootstrap4

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

特别是我需要:

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

编译Bootstrap SASS源以及我的自定义*.scss样式

确保我的自定义样式覆盖Bootstrap源,因此我可以在需要时覆盖Bootstrap源,而无需编辑Bootstrap源本身(可以轻松升级Bootstrap源版本)

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

Francesco Bo.. 115

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

编辑:此答案已更新,以使用较新版本的Angular CLI(使用版本6.1.3测试).我在本答案的底部留下了旧Angular CLI的说明,但我强烈建议您更新Angular CLI版本.

---

使用NEW 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文件之前,以便让它们覆盖引导规则:

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

这样Bootstrap 4源代码将保持干净,每当发布新版本时,它都将非常容易升级.

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

任何其他应该全局影响项目的SASS样式(与单个Component样式不同)可以添加app/assets/scss到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的替代品.

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

两个例子:

NGX自举

NG-引导

这里讨论了这两个项目之间的区别:"ng-bootstrap"和"ngx-bootstrap"有什么区别？

---

使用OLD ANGULAR CLI的说明

警告:我不再保留这部分答案了,所以我建议您继续阅读它,然后按照上面的说明更新Angular CLI版本.

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

跑:

ng set defaults.styleExt scss

这会影响您的.angular-cli.json配置文件(示例).

注意:如果您从头开始,可以使用Angular CLI创建一个新项目: 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文件之前,以便让它们覆盖引导规则:

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

(例子).

这样Bootstrap 4源代码将保持干净,每当发布新版本时,它都将非常容易升级.

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

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

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

所以在你的作品中.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的替代品.

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

两个例子:

NGX自举

NG-引导

这里讨论了这两个项目之间的区别:"ng-bootstrap"和"ngx-bootstrap"有什么区别？

1> Francesco Bo..：

---

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

编辑:此答案已更新,以使用较新版本的Angular CLI(使用版本6.1.3测试).我在本答案的底部留下了旧Angular CLI的说明,但我强烈建议您更新Angular CLI版本.

---

使用NEW 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文件之前,以便让它们覆盖引导规则:

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

这样Bootstrap 4源代码将保持干净,每当发布新版本时,它都将非常容易升级.

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

任何其他应该全局影响项目的SASS样式(与单个Component样式不同)可以添加app/assets/scss到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的替代品.

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

两个例子:

NGX自举

NG-引导

这里讨论了这两个项目之间的区别:"ng-bootstrap"和"ngx-bootstrap"有什么区别？

---

使用OLD ANGULAR CLI的说明

警告:我不再保留这部分答案了,所以我建议您继续阅读它,然后按照上面的说明更新Angular CLI版本.

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

跑:

ng set defaults.styleExt scss

这会影响您的.angular-cli.json配置文件(示例).

注意:如果您从头开始,可以使用Angular CLI创建一个新项目: 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文件之前,以便让它们覆盖引导规则:

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

(例子).

这样Bootstrap 4源代码将保持干净,每当发布新版本时,它都将非常容易升级.

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

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

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

所以在你的作品中.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的替代品.

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

两个例子:

NGX自举

NG-引导

这里讨论了这两个项目之间的区别:"ng-bootstrap"和"ngx-bootstrap"有什么区别？

2> Leo..：

---

除了@ ShinDarth的答案之外,你可能想要一个更小的解决方案,只导入你需要的Bootstrap模块而不是全部.

所以你会替换:

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

附:

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

然后你main.scss会看起来像:

// import only the Bootstrap modules you need, e.g.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
// import your own custom files, e.g.
@import "variables";
@import "global";

3> Whisher..：

---

从版本6应该是

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

如果您有自定义主题作品

只在styles.scss中添加lib

@import "./assets/scss/mytheme";
@import "~bootstrap/scss/bootstrap";