How to use Bootstrap 4 with SASS in Angular

angular sass angular-cli bootstrap-4
Francesco Borzi picture Francesco Borzi · Aug 13, 2017 · Viewed 45.1k times · Source

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

Francesco Borzi picture Francesco Borzi · Aug 13, 2017

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.

Related questions

Angular CLI SASS options

I'm new to Angular and I'm coming from the Ember community. Trying to use the new Angular-CLI based off of Ember-CLI. I need to know the best way to handle SASS in a new Angular project. I tried using the …

Read More
Angular-cli from css to scss

I've read the documentation, which says that if I want to use scss I have to run the following command: ng set defaults.styleExt scss But when I do that and make that file, I still receive this error in …

Read More
How do I add Sass compilation in Angular CLI 6: angular.json?

I just created a new Angular project using the new Angular CLI 6.0, but I need to add Sass compilation to my project. I'm aware you can set a flag when you create a project, but my project is already created …

Read More