Skip to content

Commit d93fa5f

Browse files
BroccoMRHarrison
authored andcommitted
docs: update bootstrap documentation to include SASS (angular#4067)
This fix is part of the documentation improvement angular#2711
1 parent 6f0e727 commit d93fa5f

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

docs/documentation/stories/include-bootstrap.md

+24
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,29 @@ A quick test is to add the following markup to `app.component.html`
3939
```
4040
After saving this file, return to the browser to see the bootstrap styled button.
4141

42+
## Using SASS
43+
Open `angular-cli.json` change reference of `styles.css` to `styles.scss` and rename the file accordingly.
44+
45+
Create an empty file `_variables.scss` in `src/`.
46+
47+
In `styles.scss` add the following:
48+
49+
```
50+
@import '_variables';
51+
@import '../node_modules/bootstrap/scss/bootstrap';
52+
```
53+
54+
Open `app.component.html` and add the following markup
55+
```
56+
<button class="btn btn-primary">Test Button</button>
57+
```
58+
With the application configured, run `ng serve` to run your application in develop mode.
59+
In your browser navigate to the application `localhost:4200`.
60+
Verify the bootstrap styled button appears.
61+
To ensure your variables are used open `_variables.scss` and add the following:
62+
```
63+
$body-color: red;
64+
```
65+
Return the browser to see the font color changed.
4266

4367
**Note:** When you make changes to `angular-cli.json` you will need to re-start `ng serve` to pick up configuration changes.

0 commit comments

Comments
 (0)