[Tutorial] Using Bootstrap 4 with SCSS in your Angular app

Bootstrap can be a very powerful front-end framework to quickly make your app look great, but there's a lot of pre-defined styles that you'll probably end up changing. For this reason using Bootstrap in combination with SCSS is great; you can easily change the variables that Bootstrap uses, so that you have a lot more control over the look and feel without having to override styles afterwards.

Using Bootstrap 2 or 3 with SCSS used to be a matter of including the bootstrap-sass NPM package in your project. For Bootstrap 4 this isn't the case anymore. All the documentation for bootstrap-sass says about it is:

This is Bootstrap 3. For Bootstrap 4 use the Bootstrap Ruby gem if you use Ruby, and the main repo otherwise.

This isn't very helpful for developers just starting out, so here's how you use "the main repo" of Bootstrap 4 in your Angular 2+ application.

Requirements

• NPM and Node
• An Angular 2+ app (or Angular-CLI installed and ready to start a new project)

Configuring Angular-CLI to use Sass

If you're starting a new project using the Angular CLI, use the following command to prepare it to use SCSS:

ng new My_New_Project --style=scss

If you already started a project and want to upgrade it to use SCSS instead of regular CSS, use:

ng set defaults.styleExt scss

After this, make sure to rename your .css files to .scss. Also update your .angular-cli.json file to point to the correct main styles file (by default this is styles.css, this should now be styles.scss).

Installing Bootstrap 4

Installing from NPM is easy as pie:

npm install bootstrap@4.0.0-alpha.6

To use it, add the following import statement to your own styles.scss file:

@import '~bootstrap/scss/bootstrap';

Using variables for Bootstrap

The whole purpose of using Bootstrap with SCSS was to make use of variables. Here's how to do that:

• Create your own variables file, for example in app/_variables.scss. In it, add your first variable just so we can test it all works:

$body-bg: hotpink;

• Import your variables file before importing Bootstrap. Your first two lines of styles.scss should be:

@import 'app/variables';
@import '~bootstrap/scss/bootstrap';

This makes sure that when Bootstrap's SCSS gets parsed to CSS, all the variables you defined are used. If all went well, your page should now something like this:

Success! Let me know if this worked for you, or if you have any issues.