How to enable Bootstrap variable overriding with b4st 3.0 bootswatch - SimonPadbury/b4st GitHub Wiki
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.
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";