twitter-bootstrap - 在不触及 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

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.

Answer 2

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

Answer 3

less 中的变量是延迟加载的，最后一个定义获胜。因此，只需在从 npm 或 bower 导入引导程序后立即导入您的 variables.less 版本。例如

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