How to use Bootstrap 4 with SASS in Angular

I'd like to use Bootstrap 4 with SASS in an Angular(4+) project created with Angular CLI.

In particular I need to:

• use SASS instead of CSS both as global style and Component-style
• compile Bootstrap SASS source together with my custom *.scss styles
• make sure that my custom styles override the Bootstrap source, so I can override the Bootstrap sources when needed, without editing the Bootstrap source itself (making it easy to upgrade the Bootstrap source version)
• add watch & auto-recompile whenever any of my *.scss files change (both for components & global style) to the ng serve script

In order to setup Angular + Bootstrap 4 using SASS we just need to configure the Angular CLI and install the Bootstrap 4 npm package. There is no need to install any SASS compiler because it's already included.

EDIT: this answer has been updated to work with a newer version Angular CLI (tested with version 6.1.3). I left the instructions for the older Angular CLI in the bottom of this answer, however I strongly recommend you to update your Angular CLI version.

INSTRUCTIONS USING NEW ANGULAR CLI (version 6 or higher)

1) Configure Angular CLI to use SASS instead of CSS

- On existing projects:

Edit your angular.json file and add the "styleext": "scss" key value to the projects.PROJECT_NAME.schematics.@schematics/angular:component object.

This is how it should look like:

{
  // ...
  "projects": {
    "PROJECT_NAME": {
      // ....
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
  // ...
}

- When creating a new project

Simply use:

ng new my-project --style=scss

2) Change the existing Component styles from CSS to SASS (if any)

To accomplish this you just need to rename the style file from .css to .scss and change the @Component({ ... }) configuration accordingly:

styleUrls: ['./my-component.scss']

In this way the angular-cli will automatically watch and recompile these files whenever they change while you are executing commands like ng serve.

3) Add Bootstrap 4

Install Bootstrap 4 via npm:

npm install bootstrap --save

Now add Bootstrap to the angular-cli.json config inside the styles array (before any other custom css/scss files in order to let them override bootstrap rules :

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

This way the Bootstrap 4 source code will stay clean and it will be very easy to upgrade it whenever a new version is released.

4) Add your custom (global) SASS files

Any additional SASS styles which should globally affect the project (unlike the single Component styles) can be added under app/assets/scss and then referenced in the styles array of angular-cli.json.

My suggestion is to reference a single main.scss file which will include all your custom SASS styles: for example a _variables.scss for your custom variables, a _global.scss file for your global rules, etc..

So in your angular-cli.json you will reference just one custom main.scss file:

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "src/assets/scss/main.scss"
],

which internally includes all your custom global* SASS code:

// main.scss 
@import "variables";
@import "global";
// import more custom files...

*Note that you MUST NOT include here the *.scss style files of the single Components.

5) Include the replacement for Bootstrap JavaScript and jQuery.

There are some projects that allow you to use Bootstrap without jQuery.

Two examples:

• ngx-bootstrap

• ng-bootstrap

The difference between those two project is discussed here: What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

INSTRUCTIONS USING OLD ANGULAR CLI

WARNING: I will not maintain this part of the answer anymore, so instead to proceed reading it, I recommend to update your Angular CLI version and following the instructions above.

1) Configure Angular CLI to use SASS instead of CSS

Run:

ng set defaults.styleExt scss

this will affect your .angular-cli.json config file ( example ).

Note: in case you're starting from scratch, you can create a new project using Angular CLI using: ng new my-project --style=scss which is the equivalent of creating a new project normally and then running the command mentioned above.

2) Change the existing Component styles from CSS to SASS (if any)

To accomplish this you just need to rename the style file from .css to .scss and change the @Component({ ... }) configuration accordingly:

styleUrls: ['./my-component.scss']

( example ).

In this way the angular-cli will automatically watch and recompile these files whenever they change while you are executing commands like ng serve.

3) Add Bootstrap 4

Install Bootstrap 4 via npm:

npm install bootstrap --save

Now add Bootstrap to the .angular-cli.json config inside the styles array (before any other custom css/scss files in order to let them override bootstrap rules :

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

( example ).

This way the Bootstrap 4 source code will stay clean and it will be very easy to upgrade it whenever a new version is released.

4) Add your custom (global) SASS files

Any additional SASS styles which should globally affect the project (unlike the single Component styles) can be added under app/assets/scss and then referenced in the styles array of .angular-cli.json.

My suggestion is to reference a single main.scss file which will include all your custom SASS styles: for example a _variables.scss for your custom variables, a _global.scss file for your global rules, etc.. ( example).

So in your .angular-cli.json you will reference just one custom main.scss file:

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

which internally includes all your custom global* SASS code:

// main.scss 
@import "variables";
@import "global";
// import more custom files...

*Note that you MUST NOT include here the *.scss style files of the single Components.

5) Include the replacement for Bootstrap JavaScript and jQuery.

There are some projects that allow you to use Bootstrap without jQuery.

Two examples:

• ngx-bootstrap

• ng-bootstrap

The difference between those two project is discussed here: What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

In addition to @ShinDarth's answer, you may want to go for a more minimal solution, importing only the Bootstrap modules you need instead of them all.

So you would replace:

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

With:

"styles": [
  "assets/scss/main.scss"
],

Then your main.scss would look like:

// import only the Bootstrap modules you need, e.g.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
// import your own custom files, e.g.
@import "variables";
@import "global";