Question

I’m trying to use one of the styles from http://bootswatch.com/. I would like to apply the .less version of their styles to bootstrap.css. To do so I’m doing the following as described in 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>

But it doesn’t work, i.e. I still have the default bootstrap theme.

To simplify I’ve merged variables.less into bootswatch.less, so the code now looks like this:

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

But still I get the default bootstrap theme.

I’ve checked with the debugger and all files are properly linked, so I guess I’m doing something wrong in the usage.

Answer 1

If you use the less files from bootswatch, I think you also need to use the less files from bootstrap. The variables.less file will overwrite the values from the original file.

What I did to make it work is download the bootstrap less files, copy the bootswatch.less and variables.less to the same folder (I renamed to variables-bootswatch.less for forward-compatibility, if bootswatch is not up to date).

Then I modified the bootstrap.less file to include those aforementioned files :

// 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";

Lastly, you just need to import this file (no CSS)

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

---

It appears that there is one project on github that is meant to build you swatch themes : swatchmaker on github. It should produce the appropriate CSS files.