Angular2+项目中添加Bootstrap

Posted on Edited on

大部分内容翻译自 https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Boostrap是一款很好用的CSS框架，但是如何把它加到Angular2项目里好像中文文档写的很少。下面就介绍下如何讲Bootstrap添加到Angular2+项目中。

如果你使用CSS

新建项目

先新建一个Angular2 项目然后cd到项目目录下。

1
2
ng new my-app
cd my-app

安装Bootstrap

新建好项目之后就需要将Bootstrap添加到项目中。使用—save可以把依赖顺便添加到package.json文件中

1
npm install bootstrap --save

修改项目配置

找到项目中的angular.json文件。在文件中的projects.architect.build.options下找到style属性。添加一条到bootstrap.min.css的路径。

配置文件build部分如下所示：

1
2
3
4
5
6
7
8
"build": {
  "options": {
    "styles": [
      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
      "styles.css"
    ],
  }
}

官网的路径写的是../node_modules/bootstrap/dist/css/bootstrap.min.css 但是我觉得他们可能写错了，node_modules和angular.json明明在同一层级。

测试项目

在app.component.html 添加以下代码，

1
<button class="btn btn-primary">Test Button</button>

然后通过ng serve运行项目，打开浏览器访问localhost:4200，查看按钮样式是否改变。

如果你使用SASS

新建项目

先新建一个Angular2 项目然后cd到项目目录下。（注意这次有–style=scss）

1
2
ng new my-app --style=scss
cd my-app

安装Bootstrap

1
npm install bootstrap --save

修改项目配置

在 src/文件夹下新建一个文件_variables.scss。

将以下内容添加到_variables.scss文件中：

1
$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

在项目根目录下找到 styles.scss文件添加以下内容：

1
2
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

测试项目

在app.component.html 添加以下代码，

1
<button class="btn btn-primary">Test Button</button>

然后通过ng serve运行项目，打开浏览器访问localhost:4200，查看按钮样式是否改变。

为了确保项目已经配置好，可以打开_variables.scss添加：

1
$primary: red;

然后保存刷新网页查看字体颜色是否变成了红色。