I had a tremendously difficult time getting bootstrap to work under sass and no single set of install directions worked for me so I wanted to capture the process I finally got to work here. First, as of this writing, I couldn’t get bootstrap 4 with sass to work after a very long time trying. I kept getting popper.js errors and the nav just never worked so I backed out and went with bootstrap 4. As of this writing bootstrap is at version which may explain some of the problems.


This assumes you have the following installed already.

Start a new angular project

via angular-cli:

  > ng new <projectname> --style=scss
  > cd <projectname>

Install bootstrap-sass and jquery

via npm from :

 > npm install bootstrap-sass jquery@latest --save

Import Styles and Setup Variables.

Setup the file ~/src/app/_variables.scss and import it and the bootstrap styles into ~/src/app/styles.scss at the top:

  @import 'variables';
  @import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

Add Jquery and boostrap.js

In the file .angular-cli.json modify the “styles” array as follows:

      "scripts": [


I’m very new to Angular 4, and all this discovery came after just a day or so of doin tutorials so it’s a fair thing to say that I’m sumbling around in the dark. Not sure that can be helped though, even with as mush experience programming as I have, these ‘automagic’ build tools can be difficult to figure out and I think the tooling around Angular right now has a long way to go. Further complicating things are the split between both angular information (still a lot of angular js stuff floating around) and Bootstrap 4 is still in beta.

As I progress and get more use to the framework I’ll try to loop around to a post in the future with whatever updated knowlege I pull together then. I’m just putting this up now so I can note it for myself for future use and in case it’s useful for anyone else.