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