How to recompiles .css files starting from bootswatch .less files?

Question

I succesfully installed node and less

I downloaded from bootswatch the following two files from them 'Flatly':

• variable.less
• bootswatch.less

Now I'd like simply create the final boostrap.css without do any modification, just to try if all is indetical to precooked bootstrap.css files from the same theme.

I tried

lessc variables.less > bootstrap.css

But I got empty boostrap.css file

I tried

lessc bootswatch.less > bootstrap.css

But I got

NameError: variable @navbar-default-bg is undefined in C:\Users\\Downloads\ bootswatch.less on line 16, column 14: 15
background-color: #fff; 16 color: @navbar-default-bg; 17 }

So I tried this

lessc variables.css bootswatch.less > bootstrap.css

It give me no errors, but still I got an empty bootstrap.css file.

Is there any way to compile .css using directly less or absolutely must I do all of the steps listed at Customization here ?

Answer 1

The simplest way to get a Bootswatch customized Bootstrap css (if you don't want to bother with all that black magic) is the following:

1. Download Bootstrap Less sources
2. Download corresponding Bootswatch variable.less and bootswatch.less.

3. Create new file with the following imports:

   // Set imported file paths to their actual location in your environment
   @import "..../bootstrap/less/bootstrap"; // <- Bootstrap  bootstrap.less 
   @import "..../.../bootswatch";           // <- Bootswatch bootswatch.less 
   @import "..../.../variables";            // <- Bootswatch variables.less
   

4. Compile this file with lessc (or whatever compatible tool).