Adding Bootstrap 4 and SASS to your Angular v5 CLI project

I went recently through the process of adding SASS support and the just-released official 4th version of Bootstrap, so I thought I will share. The process is not a rocket-science, although you must complete quite a few steps to make it run well together.

Versions

Just for sake of clarity, what my cli version query (ng -v) produces is:

Angular CLI: 1.6.6
Node: 8.9.4
OS: win32 x64
Angular: 5.1.2

I am not sure how similar this is for the previous versions, but I hope there are not many differences,.

SASS

So, for the first part let’s introduce SASS to our project. I won’t be describing SASS a lot, but simply speaking it’s a preprocessor used to generate CSS that supports a variety of interesting options like variables, nesting, extending and many more. Using SASS makes your stylesheets much more maintainable and therefore saves your time, which is gold.

New project

If you haven’t created any application, so you’re yet to begin the journey, the situation is quite easy. Angular CLI supports SASS in both formats (sass/scss) but also LESS. When creating the project you have to use ng new my_app with the flag--style and the appropriate value, like ng new my_app --style=sass or scss/less appropriately.

Existing project

For the existing project it’s a bit harder as CLI won’t update the existing files to SASS  automatically. So first you have to introduce SASS to AngularCLI for the future processing:

ng set defaults.styleExt scss

This will modify your angular-cli.json file defaults section like this:

"defaults": {
  "styleExt": "scss",
  "component": {}
}

By default, this is set to CSS.

Of course, next thing is to modify your stylesheets, so you have to rename the files and declarations inside of your components:

@Component({
...
styleUrls: ['./your-styles-file.scss']
})

By then, you should be ready to go. Please remember that when you’re that far, probably you could already start extracting some variables, mixings, placeholders and alike. This is a very powerful stuff and developers that worked with CSS before really are going to like it. Especially for large projects.

Have fun!

Bootstrap

To start off the bootstrap stuff, you need first to install it, and I will assume here you’re using npm. The installation goes obviously like that:

npm install bootstrap --save

You can ignore the following warnings:

npm WARN bootstrap@4.0.0 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.0.0 requires a peer of popper.js@^1.12.9 but none is installed. You must install peer dependencies yourself.

as described in this github issue.

Now we have to point Angular CLI to where the CSS for bootstrap is located, so in angular-cli.json you will find useful to extend the section of styles:

"styles": [
"styles.scss",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],

This literally is enough to begin to work with your projects as long as you don’t require javascript components of bootstrap to work properly. If you need it, then you have to install jquery as in one of the warnings above (and update scripts part of the angular-cli.json as above for styles). There is also an interesting project ngx-bootstrap which will allow you to do it in a more modular way.

Hope this helps. Stay tuned.

 

 

One thought on “Adding Bootstrap 4 and SASS to your Angular v5 CLI project

  1. Pingback: dotnetomaniak.pl

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.