How to properly include Bootstrap into your project using Gulp while keeping it isolated, upgradable and compilable.
First, two big no-no’s
- Don’t manually copy/paste the bootstrap source to your project.
In my early days, I would copy over the entire Bootstrap source in my project, because it seemed the only logical way. Apparently, it’s possible to keep Bootstrap in your npm packages so you can upgrade it with a single npm command, and avoid importing it using crazy paths that point to your
node_modules directory. Read on.
2. Don’t include the full bootstrap.min.css file in your HTML
You won’t have access to Bootstrap’s SASS variables and you won’t be able to remove components you don’t use. You’ll end up with much more CSS than what you actually need. That’s only good for prototyping.
Setup your project’s package.json as described in the npm documentation and add the bootstrap-sass npm package
$ npm install --save bootstrap-sass
You will need the
gulp-sass packages in order to setup your tasks for SASS compilation, so let’s get those installed as well
$ npm install --save gulp gulp-sass
gulpfile.js in the root of your project, and add the following
We’re almost there, your SASS build task is complete. Please pay attention to line
32 of the script above. What this will do is it will bring over the Bootstrap source during SASS compilation time; this way you can customize variables without having to copy the entire Bootstrap source in your project, or without having to use long and complex import paths.
To gracefully override the main bootstrap component loader, copy the _bootstrap.scss file into your
src/assets/sass folder (or wherever your project SASS is) and rename it to
_bootstrap_custom.scss. You can remove components as you please, depending on what your needs are.
As a last touch, you need a
main.scss file which will load your custom SCSS, as well as Bootstrap. Create it in the same location. It could look a bit like that (this is a preference/organization thing)
Congratulations. You have a fully working, customizable, upgradable Bootstrap included in your project. Your usual workflow would be to have a copy of the Bootstrap _variables.scss file open and copy/modify variables to a local variables.scss file. I’ve seen a more handy method: Copy all the contents of the original
_variables.scss file into yours and comment out all of them (using your editor's comment shortcut) then every time you need to modify one, uncomment it, bring it on top and slowly built from there. Comments will/could be cleared out during SASS compilation time/uglification (but that’s a different howto).
In the next post, I’ll show my implementation of commonly asked — but missing — extra Bootstrap functionality.