diff --git a/docs/documentation/stories/include-bootstrap.md b/docs/documentation/stories/include-bootstrap.md index c3042267c084..acb47ae8922b 100644 --- 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 +``` + +``` +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.