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

Question

我想在通过Angular CLI创建的Angular（4+）项目中将Bootstrap 4与SASS一起使用。

特别是我需要：

• 使用SASS代替CSS作为全局样式和组件样式
• 编译Bootstrap SASS源以及我的自定义* .scss样式
• 确保我的自定义样式覆盖了Bootstrap源，因此我可以在需要时覆盖Bootstrap源，而无需编辑Bootstrap源本身（使升级Bootstrap源版本变得容易）
• 每当我的任何* .scss文件更改（包括组件和全局样式）时，都向ng serve脚本添加watch和自动重新编译

Answer 1

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

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

---

使用新的ANGU 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添加到styles数组内的angular-cli.json配置中（在任何其他自定义css / scss文件之前，以使它们覆盖bootstrap规则：

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

这样，Bootstrap 4源代码将保持干净，每发布一个新版本，就很容易对其进行升级。

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

可以全局影响项目的任何其他SASS样式（与单个Component样式不同）可以添加到app/assets/scss ，然后在angular-cli.json的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-bootstrap

• ng-bootstrap

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

---

使用旧的角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添加到styles数组内的.angular-cli.json配置中（在任何其他自定义css / scss文件之前，以使它们覆盖引导程序规则：

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

（ 示例 ）。

这样，Bootstrap 4源代码将保持干净，每发布一个新版本，就很容易对其进行升级。

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

可以全局影响项目的任何其他SASS样式（与单个Component样式不同）可以添加到app/assets/scss ，然后在.angular-cli.json的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-bootstrap

• ng-bootstrap

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

Answer 2

除了@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";

Answer 3

从版本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";

Answer 4

这是我成功构建的另一种方法

1-安装引导程序

npm install bootstrap 

这应该在node_modules下添加boostrap scss文件。 （步骤2-6来自https://code.visualstudio.com/docs/languages/css ）

2-安装node-sass

nmp install -g node-sass

这需要将Sass转换为CSS

3-在适合您保留scss和生成的css文件的位置创建一个文件夹。 例如

your-project/
├── scss
│   └── custom.scss   
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

4-创建具有以下内容的custom.scss文件：

@import "../node_modules/bootstrap/scss/bootstrap";

5-通过Ctrl + Shift + B>配置任务>从模板创建task.json文件在VSCode中创建任务>其他

.vscode下的task.json文件是使用默认内容创建的。 将内容替换为

// Sass configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [{
    "label": "Sass Compile",
    "type": "shell",
    "command": "node-sass scss/custom.scss scss/custom-bootstrap.css",
    "group": "build",
    "problemMatcher": [
      "$eslint-stylish"
    ]
  }]
}

注意：根据需要修改文件名和路径。

6-运行任务以生成CSS：Ctrl + Shift + B>“ Sass编译”或

7-遵循引导主题过程中的步骤：（ https://getbootstrap.com/docs/4.1/getting-started/theming/ ）

Answer 5

万一其他人遇到我使用angular-cli运行Bootstrap 4时遇到的Javascript依赖关系问题，还需要让angular-cli编译器知道您已经安装了boostrap 4需要的其他依赖关系：

jQuery，popper.js和bootstrap.js

为此，您需要将.angular-cli.json配置文件上的scripts数组修改为如下所示：

"scripts": [
    "../node_modules/jquery/dist/jquery.slim.js", 
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"]

我猜您已经使用npm install --save jquery popper.js安装了jquery和popper，因此这些程序包在node_modules文件夹中可用。