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

Question

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

我试过类似的东西：

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

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

Answer 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