Setting up Bootstrap 4 to work with Angular-CLI turned out to be WAY easier than what I had been trying to do in my previous post. The info I had been finding was way off track and I think (like me) they were confused between the static and scss portions of bootstrap 4.
First, go ahead and setup your angular-cli project with the style option
--style=scss or just convert your poject by setting the appropriate line in
.angular-cli.json (google it hippies).
From porject folder npm install bootstrap 4. Command below reflects version at time of writing but check the bootstrap 4 site for current command.
npm install firstname.lastname@example.org jquery@latest tether --save
Create your own file for variables wherever you like and import it into the root styles.scss file. I created mine in
Import your variables file and the bootstrap scss file into
src/styles.scss like so:
// My own variables file. @import 'scss/variables'; // Load the main bootstrap file @import '../node_modules/bootstrap/scss/bootstrap';
If you want to test it, set a variable in your local file with something like
$body-bg: red; and reload the page and you’ll know if it’s working.
.angular-cli.json and add them to the scripts property like so:
"scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/tether/dist/js/tether.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],
That is pretty much it! Bootstrap does the importing for you of all the sub-components. Likely there is more but this is MUCH more clean that the method I previously posted about so I wanted to update.