To customize Bootstrap Sass to include as little as possible modularly, you can delete lines 19-36 and add the individual Sass CSS and jQuery JS partial files listed by mZoo.
For the JS, there’s no minimum and you can add and subtract any partial.
For the Scss, I believe the bare minimum needs to be the following:
"./assets/stylesheets/bootstrap/_variables.scss",
"./assets/stylesheets/bootstrap/_normalize.scss",
"./assets/stylesheets/bootstrap/_mixins.scss",
Normalize is an excellent addition to any new project. If you include any other Bootstrap partials, they are often if not usually referencing either _variables.scss
or _mixins.scss
. The rest of the Bootstrap partials should only be used as needed to keep file sizes lower.
Sometimes, when you reference one file it’ll include something from another file. I ran into this example when I included _navbar.scss
and was forced to include _forms.scss
because of a mixin that was located in the forms partial. I’m hoping this isn’t common.
Another suggestion made to me about modularizing the Bootstrap styles files was to completely take out line 19 from bower.json referencing the main _bootstrap.scss
partial and duplicate this file into your assets/styles
local directory. From there, you can reference it in main.scss
. My main problem with this method is that you have to either modify every line in _bootstrap.scss
to point back to the bower_components
partials or you should set loadPath
option to back to bower_components/bootstrap-sass-official/assets/stylesheets
, however I haven’t figured out where in gulpfile.js
to do this! Anyone know?
I know that Gulp Ruby Sass has this option but it’s not the one loaded in Sage.