Modify loaded components in new bootstrap 4 setup

Sage (v8.5x) is using wiredep and is importing bootstrap from the main scss/bootstrap.scss file in bower. If I would like to to exclude some components that it imports in that file, what would be a good approach to do it?

Use a bower override to pull in all the Bootstrap SCSS files individually (and JS). You can use Bootstrap’s own import order as a model and just omit the elements you don’t want. You’ll need to add the JS to the overrides too. Sage 8.4.2 shipped with some overrides so its bower.json is a good example (just note the different package names—stick with bootstrap rather than bootstrap-sass unless you plan to use the other package).

For the JS you can probably get away with just using the single file specified in the Bootstrap bower.json's main property. If you want to split those up then include them in this order:

"./js/dist/util.js",
"./js/dist/alert.js",
"./js/dist/button.js",
"./js/dist/carousel.js",
"./js/dist/collapse.js",
"./js/dist/dropdown.js",
"./js/dist/modal.js",
"./js/dist/scrollspy.js",
"./js/dist/tab.js",
"./js/dist/tooltip.js",
"./js/dist/popover.js"
1 Like

having problems with this and BS 4. I can tell bower there’s an override but its always missing mixins even i copy the scss list from _bootstrap.scss.

Would be good to know if you got anywhere with this? !