Overriding Bootstrap variables without touching Bower

限于喜欢 提交于 2019-12-23 20:20:03

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!