Wiredep injection of _bootstrap.scss

At the top of main.scss there’s // Automatically injected Bower dependencies via wiredep (never manually edit this block)

Where is the definition of what is to be automatically injected and can I add another element (say, bootstrap mixins)?

This depends on main-bower-files, and whatever is listed in a Bower packages main declaration. Many Bower packages will still use the compiled files for main, so most likely a css file. If it includes SASS files though, you will need to set up overrides as shown here or look at the Sage overrides here.

From there you should be able to add your own overrides for a Bower package, then run gulp and any scss files you add should be automatically added to that wiredep block.

My question was poorly worded. Within main.scss I see:

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower

I see now that although the bower.json has a very long list of bootstrap assets, there is in fact only a single stylesheet listed _bootstrap.scss.

Also, I have found that the origin of my question is irrelevant since in fact, one can already use bootstrap mixins (I was using incorrect LESS syntax instead of SASS syntax). It’s also slightly irritating that the SASS mixins are not identical to those available with LESS, but I guess you guys have a good reason for selecting SAAS over LESS?

Bootstrap 4 will be switching to SCSS, so we made the change in preparation for that.

1 Like