如何使用默认主题将 Twitter Bootstrap LESS 文件预处理为聚合样式文件？答案

【问题标题】：How to preprocess Twitter Bootstrap LESS files into aggregated style file using default theme?如何使用默认主题将 Twitter Bootstrap LESS 文件预处理为聚合样式文件？
【发布时间】：2013-11-06 04:09:10
【问题描述】：

我在我的新项目中使用 Twitter Bootstrap 3，我想不在我的 HTML 标记中嵌入 bootstrap 的类（以避免与框架耦合） .所以我决定按照here 的描述使用LESS。

我尝试了类似的方法：

nav {
 .navbar;
 .navbar-fixed-top;
 .navbar-default;
}

它按预期工作，但我无法从 Bootstrap 的发行版中应用 theme.less。有没有办法优雅地做到这一点？

【问题讨论】：

你说的不能申请是什么意思？你想做什么？你得到什么错误（如果有的话）？你能发布一个代码示例吗？
@MichałRybak 我的意思是我的页面看起来像默认的 flat 引导页面（theme.less 中的样式完全被忽略）。我试图在 bootstrap.less 之前导入 theme.less，在它之后，而不是它 - 对我没有任何作用。我是 HTML/CSS 的新手。也许我错过了什么？
导入到什么文件？ nothing works 是什么意思 - 在编译到 CSS 期间是否有任何错误？请注意，theme.less 本身会导入 variables.less1 and mixins.less, make sure they are in the same folder with theme.less`。
我刚刚查看了我的 theme.less，它看起来很糟糕。我再次检查了引导程序，现在页面看起来更好，但似乎主题并没有覆盖所有样式 - 活动导航栏菜单项太暗（主题使其更亮）。当 bootstrap-theme.css 的定义出现在 HTML 中的 bootstrap.css 之前时，我使用 CSS 的效果相同。
我不确定你现在有什么问题。你能发布一些代码示例吗？

标签： html css twitter-bootstrap less twitter-bootstrap-3

【解决方案1】：

默认情况下，theme.less 将被编译到不同的 theme.css 文件中。所以在 bootstrap.less 中没有导入 theme.less。

所以例如编译这个：

@import "variables.less";
@import (reference) "mixins.less";
@import (reference) "navbar.less";
@import (reference) "utilities.less"; // for pull-left()
@import (reference) "forms.less"; // for form-inline()
@import (reference) "theme.less";

nav {
 .navbar;
 .navbar-fixed-top;
 .navbar-default;
}

生成的 CSS 将按照 theme.less 中的 .navbar-default 定义的样式设置您的导航。

注意在 navbar.less 之后导入 theme.less

【讨论】：