使用Twitter Bootstrap中的less

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主题。

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

- don

---

在http://lesscss.org/#usage上，属性`type="text/css"`也保留在less链接上。 - Matteus Hemström

我已经添加了它，但仍然没有结果！ - don

为什么不把Less编译成CSS呢？ - He Hui

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上有一个项目旨在为您构建主题： Github上的色卡制造机。它应该会产生相应的CSS文件。

- Sherbrow

Answer 2

我认为你需要按照以下顺序更改脚本文件

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

- Sameera Thilakasiri

---

请确保在脚本之前包含您的样式表。 - Matteus Hemström