Overriding Bootstrap variables without touching Bo

Question

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";
....

Answer 1

Best way to override original bootstrap variables is to duplicate the variables.less file in your project directory and load it right after the bootstrap bower import. In the blog http://iamkevinrhodes.com/ this workaround is also mentioned in section: 5. A new approach to global theming

Answer 2

Variables in less are lazy loaded and the last definition wins. So therefore just import your version of variables.less right after importing the bootstrap from npm or bower. e.g.

@import "bootstrap"
@import "custom/less/variables.less"

Answer 3

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.