在不接触 Bower 的情况下覆盖 Bootstrap 个变量

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 并在引导变量之后但在模块之前导入您自己的 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

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

Answer 3

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

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

在不接触 Bower 的情况下覆盖 Bootstrap 个变量

Overriding Bootstrap variables without touching Bower

twitter-bootstrap

less

bower

yo