Question

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

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

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

@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

不是包括所有bootstrap.less，而是将其内容复制到app.less并在bootsrap vars之后导入您自己的variables.less，但在模块之前：

@bootrap-dir: "bower_components/bootstrap/less";

@import "@{bootrap-dir}/variables.less";
@import "your-variables.less";
@import "@{bootrap-dir}/mixins.less";
@import "your-mixins.less";
//...

稍后，您只能加载所需的模块。

Answer 2

覆盖原始引导变量的最佳方法是复制项目目录中的variables.less文件，并在引导bower导入后立即加载它。在博客http://iamkevinrhodes.com/中，这一解决方法也在以下部分中提到：5。全局主题的新方法

Answer 3

Variables in less are lazy loaded and the last definition wins。因此，只需在从npm或bower导入引导程序后立即导入您的变量版本。 e.g。

<button onclick="IPMapper.addIPMarker($('<?php echo $ip ?>').val());">Geocode</button>

覆盖Bootstrap变量而不触及Bower

3 个答案: