css - 使用 less 和 Twitter bootstrap

Question

我正在尝试使用 http://bootswatch.com/ 中的一种样式.我想将他们样式的 .less 版本应用到 bootstrap.css。为此，我将按照 http://lesscss.org/#usage 中的说明执行以下操作:

<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="variables.less" rel="stylesheet/less">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>

但它不起作用，即我仍然有默认的 Bootstrap 主题。

为了简化，我将 variables.less 合并到 bootswatch.less 中，因此代码现在如下所示:

<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>

但我仍然得到默认的 Bootstrap 主题。

我已经用调试器检查过所有文件都正确链接，所以我想我在使用中做错了什么。

Answer 1

如果你使用 bootswatch 的 less 文件，我认为你还需要使用 bootstrap 的 less 文件。 variables.less 文件将覆盖原始文件中的值。

为了让它工作，我所做的是下载 bootstrap less 文件，将 bootswatch.less 和 variables.less 复制到同一个文件夹(我重命名为 variables-bootswatch.less 用于向前兼容，如果 bootswatch 不是最新的)。

然后我修改了 bootstrap.less 文件以包含上述文件:

// Header and everything before variables.less

@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "variables-bootswatch.less";

// everything else, then at the end

@import "bootswatch.less";

最后，你只需要导入这个文件(没有CSS)

<link href="bootstrap.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>

---

github 上似乎有一个元素旨在为您构建色板主题:swatchmaker on github .它应该生成适当的 CSS 文件。