CODEWITHSUNDEEP
csstwitter-bootstraplessbootswatch
don
don

Reputation: 4522

Using less with twitter bootstrap

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.

Upvotes: 3

Views: 3153

Answers (2)

Sherbrow
Sherbrow

Reputation: 17379

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.

Upvotes: 6

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9498

I think you need to change the order of script file as follows

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

Upvotes: 0

Related Questions