docs: update bootstrap documentation to include SASS (angular#4067)

Brocco · web-flow · commit 60d2ea7e6f8b · 2017-01-17T23:50:15.000-05:00
This fix is part of the documentation improvement angular#2711
diff --git a/docs/documentation/stories/include-bootstrap.md b/docs/documentation/stories/include-bootstrap.md
@@ -39,5 +39,29 @@ A quick test is to add the following markup to `app.component.html`
 ```
 After saving this file, return to the browser to see the bootstrap styled button.
 
+## Using SASS
+Open `angular-cli.json` change reference of `styles.css` to `styles.scss` and rename the file accordingly.
+
+Create an empty file `_variables.scss` in `src/`.
+
+In `styles.scss` add the following:
+
+```
+@import '_variables';
+@import '../node_modules/bootstrap/scss/bootstrap';
+```
+
+Open `app.component.html` and add the following markup
+```
+<button class="btn btn-primary">Test Button</button>
+```
+With the application configured, run `ng serve` to run your application in develop mode.
+In your browser navigate to the application `localhost:4200`.
+Verify the bootstrap styled button appears.
+To ensure your variables are used open `_variables.scss` and add the following:
+```
+$body-color: red;
+```
+Return the browser to see the font color changed.
 
 **Note:** When you make changes to `angular-cli.json` you will need to re-start `ng serve` to pick up configuration changes.
