How do I properly compile a new version of bootstrap from source using a bootswatch variables.less file

0
votes

I've been trying to get a theme from bootswatch to compile into a new bootstrap.css file.

On the bootswatch page, I see four files for download: bootstrap.css, bootstrap.min.css, variables.less and bootswatch.less.

I can see I could replace bootstrap.[min.].css with the existing file in my project. But, my project is based on twitter bootstrap 2.3.x, not 2.2.x as bootswatch is using. I don't want to have to worry about different version issues in my markup. This does not seem like the correct way to go if I am trying to utilize the newest versions of bootstrap.

So, I downloaded variables.less and cloned the bootstrap repository from github. After installing the dependencies, I then copy variables.less into the less directory (and overwrite the existing variables.less). If I then run make, it builds a new CSS file into docs/assets/css/bootstrap.css. This looks like it has some of the new things (for example, the font from the bootswatch theme is set inside the h1,h2, etc. tags.).

However, the CSS file never imports the font, so the font cannot be used. In the bootstrap.css file from bootswatch, I see a font import as the very first line in the CSS file. The newly generated file does not have a font import at all.

What step am I missing? Is this the correct way to do things given that the variables.less file is clearly based on 2.2.x and the new boostrap is 2.3.x? I would think it would work because the boostrap authors would probably want to use such a system to assist with backwards compatibility.

1
twitter-bootstrapbootswatch

1 Answers

1
votes

What step am I missing?

You've downloaded the bootstap less files and replaced the default variables.less file with your bootswatch version. You also need to include the bootswatch.less file when you compile everything.

To do this, copy bootswatch.less to the less directory, then with a text editor open the bootstrap.less file (which orchestrates all the individual files you are compiling) and add @import "bootstrap.less"; just after @import "variables.less";

I'm not absolutely certain that this is the correct position. If this doesn't do the trick, you could try at the end, just before @import "utilities.less";

Good luck.