How to enable Bootstrap variable overriding with b4st 3.0 bootswatch

Since b4st 3 is out and @SimonPadbury added gulp compilation to it I wanted to share quick instructions on how to add bs4 via npm and enable variable overriding.

First add bootstrap via npm by running: npm install bootstrap

Then add the following to enqueues.php so we use the npm sourced bootstrap js

wp_register_script('bootstrap-js', get_template_directory_uri() . '/node_modules/bootstrap/dist/js/bootstrap.min.js', false, '4.4.1', true);
wp_enqueue_script('bootstrap-js');

and remove the cdn style and js registration:

//wp_register_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, '4.4.1', null);
//wp_enqueue_style('bootstrap4');

//wp_register_script('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', false, '4.4.1', true);
//wp_enqueue_script('bootstrap4');

add to b4st.scss at the top

//These are the variables to overwrite bootstrap styling
@import "b4st/variables";

//Load bootstrap style via npm
@import '../../node_modules/bootstrap/scss/bootstrap';

add the file variables.scss to b4st folder

/* All Bootstrap themeing variables can be added here */

$primary:       #009922;
$enable-shadows:            true;
$enable-gradients:          true;

Now you can run gulp and the default bootstrap variables can be overridden.

Bonus

If you want to use bootswatch themes, that's also easy

Simply run npm install bootswatch Then change the b4st.scss by adding the two bootswatch scss files (make sure to place them around the bootstrap.scss import call)

//we are also adding bootswatch (change [theme] to the theme name)
@import "../../node_modules/bootswatch/dist/[theme]/variables";

//Load bootstrap style via npm
@import '../../node_modules/bootstrap/scss/bootstrap';

//don't forget this
@import "../../node_modules/bootswatch/dist/[theme]/bootswatch";