@@ -22,31 +22,32 @@ With the new project created and ready you will next need to install bootstrap t
22
22
Using the ` --save ` option the dependency will be saved in package.json
23
23
24
24
``` sh
25
- # version 3.x
26
25
npm install bootstrap --save
27
-
28
- # version 4.x
29
- npm install bootstrap@next --save
30
26
```
31
27
32
28
### Configuring Project
33
29
34
30
Now that the project is set up it must be configured to include the bootstrap CSS.
35
31
36
- - Open the file ` .angular-cli.json ` from the root of your project.
37
- - Under the property ` apps ` the first item in that array is the default application.
38
- - There is a property ` styles ` which allows external global styles to be applied to your application.
32
+ - Open the file ` angular.json ` from the root of your project.
33
+ - Under the property ` projects ` find your project.
34
+ - Inside ` architect.build.options ` locate the ` styles ` property.
35
+ - This property allows external global styles to be applied to your application.
39
36
- Specify the path to ` bootstrap.min.css `
40
37
41
38
It should look like the following when you are done:
42
39
``` json
43
- "styles" : [
44
- " ../node_modules/bootstrap/dist/css/bootstrap.min.css" ,
45
- " styles.css"
46
- ],
40
+ "build" : {
41
+ "options" : {
42
+ "styles" : [
43
+ " ../node_modules/bootstrap/dist/css/bootstrap.min.css" ,
44
+ " styles.css"
45
+ ],
46
+ }
47
+ }
47
48
```
48
49
49
- ** Note:** When you make changes to ` . angular-cli .json` you will need to re-start ` ng serve ` to pick up configuration changes.
50
+ ** Note:** When you make changes to ` angular.json ` you will need to re-start ` ng serve ` to pick up configuration changes.
50
51
51
52
### Testing Project
52
53
@@ -74,11 +75,7 @@ cd my-app
74
75
### Installing Bootstrap
75
76
76
77
``` sh
77
- # version 3.x
78
- npm install bootstrap-sass --save
79
-
80
- # version 4.x
81
- npm install bootstrap@next --save
78
+ npm install bootstrap --save
82
79
```
83
80
84
81
### Configuring Project
@@ -94,11 +91,6 @@ $icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
94
91
In ` styles.scss ` add the following:
95
92
96
93
``` sass
97
- // version 3
98
- @import 'variables';
99
- @import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';
100
-
101
- // version 4
102
94
@import 'variables';
103
95
@import '../node_modules/bootstrap/scss/bootstrap';
104
96
```
@@ -117,10 +109,6 @@ Verify the bootstrap styled button appears.
117
109
To ensure your variables are used open ` _variables.scss ` and add the following:
118
110
119
111
``` sass
120
- // version 3
121
- $brand-primary: red;
122
-
123
- // version 4
124
112
$primary: red;
125
113
```
126
114
0 commit comments