在不接触 Bower 的情况下覆盖 Bootstrap 个变量
Overriding Bootstrap variables without touching Bower
如果我不想触及 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";
....
与其包含所有 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";
//...
稍后,您可以只加载您需要的模块。
覆盖原始 bootstrap 变量的最佳方法是复制项目目录中的 variables.less 文件并在 bootstrap bower 导入后立即加载它。在博客 http://iamkevinrhodes.com/ 部分中也提到了此解决方法:5. 全局主题化的新方法
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 变量?
我正在使用 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";
....
与其包含所有 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";
//...
稍后,您可以只加载您需要的模块。
覆盖原始 bootstrap 变量的最佳方法是复制项目目录中的 variables.less 文件并在 bootstrap bower 导入后立即加载它。在博客 http://iamkevinrhodes.com/ 部分中也提到了此解决方法:5. 全局主题化的新方法
Variables in less are lazy loaded and the last definition wins。因此,只需在从 npm 或 bower 导入 bootstrap 后立即导入您的 variables.less 版本。例如
@import "bootstrap"
@import "custom/less/variables.less"