在不触及Bower的情况下覆盖Bootstrap变量 [英] Overriding Bootstrap variables without touching Bower

问题描述

如果我不想触摸Bower文件，如何覆盖Bootstrap变量?

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

我正在使用Yo，Grunt和Bower.对于哟，我正在使用cg-angular.

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

我的app.less看起来像这样:

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

推荐答案

与其包含所有bootstrap.less，而是将其内容复制到您的app.less，然后在启动后的vars之后但在模块之前导入您自己的variables.less:

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.

这篇关于在不触及Bower的情况下覆盖Bootstrap变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！