问题
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";
....
回答1:
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.
回答2:
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
回答3:
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"
来源:https://stackoverflow.com/questions/28024537/overriding-bootstrap-variables-without-touching-bower