Search code examples
twitter-bootstraplessboweryo

Overriding Bootstrap variables without touching Bower

How can I override the Bootstrap variables if I don't want to touch the Bower files?

I am using Yo, Grunt, and Bower. For yo, I am using cg-angular.

My app.less looks like this:

@import "bower_components/bootstrap/less/bootstrap.less";
@import "bower_components/font-awesome/less/font-awesome.less";
@fa-font-path: "bower_components/font-awesome/fonts";
....
Solution

  • Instead of including all bootstrap.less, copy his content to your app.less and import your own variables.less after bootsrap vars, but before modules:

    @bootrap-dir: "bower_components/bootstrap/less";

@import "@{bootrap-dir}/variables.less";
@import "your-variables.less";
@import "@{bootrap-dir}/mixins.less";
@import "your-mixins.less";
//...

    Later, you can load only the modules you need.