How to use Bootstrap 4 with SASS in Angular

Question

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 glo

Answer 1

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";