ShinDarth ShinDarth - 2 years ago 371
Sass (Sass) Question

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


Answer Source

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.

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=sass 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@4.0.0-beta --save

Note: by the time I wrote this answer, bootstrap 4.0 was still in beta. Please look at this page to check what the latest version of bootstrap is and feel free to edit my answer accordingly.

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:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download