Use the Bootstrap config.json file with Bower

Question

I used the Bootstrap customizer tool: http://getbootstrap.com/customize/ It generates a config.json file that I reuse whenever I need to make changes.

I use Bower to handle all my dependencies, except Bootstrap, because I need my customized version.

Is there a way I can tell Bower to use my config.json file to generate the CSS?

The chosen answer to this question seems to state that it is actually possible, but it doesn't give much details and I couldn't find anything else about that anywhere: Twitter Bootstraps config.json - what does it do?

I also found this package that lets you customize Bootstrap using your own LESS files, but that's not what I did, and it doesn't seem to use the config.json file: https://www.npmjs.org/package/grunt-customize-bootstrap

Thanks!

Answer 1

You can use bower to install bootstrap-sass-official or the less version if you want and as stated here https://github.com/twbs/bootstrap-sass#sass

You can import bootstrap-custom and comment out the components that you don't need.

I had the same issue like you, this is what my bootstrap-custom.scss file looks like

@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";
...
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/responsive-utilities";

And in my default.scss file i've put

@import "bootstrap";

And then compile!

Ps: i wanted to point out the link in a comment but need 50 reputation point :(