如何在 Angular 中使用带有 SASS 的 Bootstrap 4 [英] How to use Bootstrap 4 with SASS in Angular

查看：25
本文介绍了如何在 Angular 中使用带有 SASS 的 Bootstrap 4的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I'd like to use Bootstrap 4 with SASS in an Angular(4+) project created with Angular CLI.

特别是我需要:

  • 使用 SASS 而不是 CSS 作为全局样式和组件样式
  • 将 Bootstrap SASS 源代码与我的自定义 *.scss 样式一起编译
  • 确保我的自定义样式覆盖 Bootstrap 源代码，以便我可以在需要时覆盖 Bootstrap 源代码，而无需编辑 Bootstrap 源代码本身(以便轻松升级 Bootstrap 源代码版本)
  • 添加监视和每当我的任何 *.scss 文件(组件和全局样式)更改为 ng serve 脚本
    • 时自动重新编译
  • use SASS instead of CSS both as global style and Component-style
  • compile Bootstrap SASS source together with my custom *.scss styles
  • make sure that my custom styles override the Bootstrap source, so I can override the Bootstrap sources when needed, without editing the Bootstrap source itself (making it easy to upgrade the Bootstrap source version)
  • add watch & auto-recompile whenever any of my *.scss files change (both for components & global style) to the ng serve script

推荐答案

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

In order to setup Angular + Bootstrap 4 using SASS we just need to configure the Angular CLI and install the Bootstrap 4 npm package. There is no need to install any SASS compiler because it's already included.

EDIT:此答案已更新以适用于较新版本的 Angular CLI(使用 6.1.3 版测试).我在这个答案的底部留下了旧 Angular CLI 的说明，但是我强烈建议你更新您的 Angular CLI 版本.

EDIT: this answer has been updated to work with a newer version Angular CLI (tested with version 6.1.3). I left the instructions for the older Angular CLI in the bottom of this answer, however I strongly recommend you to update your Angular CLI version.

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

Edit your angular.json file and add the "styleext": "scss" key value to the projects.PROJECT_NAME.schematics.@schematics/angular:component object.

它应该是这样的:

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

- 创建新项目时

简单使用:

ng new my-project --style=scss

要完成此操作，您只需将样式文件从 .css 重命名为 .scss 并更改 @Component({ ... }) 相应的配置:

To accomplish this you just need to rename the style file from .css to .scss and change the @Component({ ... }) configuration accordingly:

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

这样，当您执行诸如 ng serve 之类的命令时，angular-cli 会在这些文件发生变化时自动监视并重新编译它们.

In this way the angular-cli will automatically watch and recompile these files whenever they change while you are executing commands like ng serve.

通过 npm 安装 Bootstrap 4:

Install Bootstrap 4 via npm:

npm install bootstrap --save

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

Now add Bootstrap to the angular-cli.json config inside the styles array (before any other custom css/scss files in order to let them override bootstrap rules :

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

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

This way the Bootstrap 4 source code will stay clean and it will be very easy to upgrade it whenever a new version is released.

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

Any additional SASS styles which should globally affect the project (unlike the single Component styles) can be added under app/assets/scss and then referenced in the styles array of angular-cli.json.

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

My suggestion is to reference a single main.scss file which will include all your custom SASS styles: for example a _variables.scss for your custom variables, a _global.scss file for your global rules, etc..

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

So in your angular-cli.json you will reference just one custom main.scss file:

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

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

which internally includes all your custom global* SASS code:

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

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

*Note that you MUST NOT include here the *.scss style files of the single Components.

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

There are some projects that allow you to use Bootstrap without jQuery.

两个例子:

ng-bootstrap

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

The difference between those two project is discussed here: What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

警告:我不会再保留这部分答案，因此要继续阅读它，我建议更新您的 Angular CLI 版本并按照上述说明进行操作.

WARNING: I will not maintain this part of the answer anymore, so instead to proceed reading it, I recommend to update your Angular CLI version and following the instructions above.

运行:

ng set defaults.styleExt scss

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

this will affect your .angular-cli.json config file ( example ).

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

Note: in case you're starting from scratch, you can create a new project using Angular CLI using: ng new my-project --style=scss which is the equivalent of creating a new project normally and then running the command mentioned above.

要完成此操作，您只需将样式文件从 .css 重命名为 .scss 并更改 @Component({ ... }) 相应的配置:

To accomplish this you just need to rename the style file from .css to .scss and change the @Component({ ... }) configuration accordingly:

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

( 示例.

这样，当您执行诸如 ng serve 之类的命令时，angular-cli 会在这些文件发生变化时自动监视并重新编译它们.

In this way the angular-cli will automatically watch and recompile these files whenever they change while you are executing commands like ng serve.

通过 npm 安装 Bootstrap 4:

Install Bootstrap 4 via npm:

npm install bootstrap --save

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

Now add Bootstrap to the .angular-cli.json config inside the styles array (before any other custom css/scss files in order to let them override bootstrap rules :

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

( 示例.

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

This way the Bootstrap 4 source code will stay clean and it will be very easy to upgrade it whenever a new version is released.

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

Any additional SASS styles which should globally affect the project (unlike the single Component styles) can be added under app/assets/scss and then referenced in the styles array of .angular-cli.json.

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

My suggestion is to reference a single main.scss file which will include all your custom SASS styles: for example a _variables.scss for your custom variables, a _global.scss file for your global rules, etc.. ( example).

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

So in your .angular-cli.json you will reference just one custom main.scss file:

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

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

which internally includes all your custom global* SASS code:

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

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

*Note that you MUST NOT include here the *.scss style files of the single Components.

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

There are some projects that allow you to use Bootstrap without jQuery.

两个例子:

ng-bootstrap

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

The difference between those two project is discussed here: What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

这篇关于如何在 Angular 中使用带有 SASS 的 Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆