在不触及 Bower 的情况下覆盖 Bootstrap 变量答案

【问题标题】：Overriding Bootstrap variables without touching Bower在不触及 Bower 的情况下覆盖 Bootstrap 变量
【发布时间】：2015-01-19 12:20:01
【问题描述】：

如果我不想接触 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";
....

【问题讨论】：

你说的是 variables.less 吗？

标签： twitter-bootstrap less bower yo

【解决方案1】：

不要包含所有bootstrap.less，而是将他的内容复制到您的app.less，并在引导变量之后、模块之前导入您自己的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";
//...

稍后，您可以只加载您需要的模块。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

@import "bootstrap"
@import "custom/less/variables.less"

【讨论】：