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 220.127.116.11-beta which may explain some of the problems.
This assumes you have the following installed already.
Start a new angular project
> 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:
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.