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

3
votes

I succesfully installed node and less

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

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 ?

1
twitter-bootstrapless
You also need to download Bootstrap Less sources and compile all this all together (for example by compiling a file like this (obviously using "flatly" files instead of "spacelab")). – seven-phases-max
Thanks this works, create a regular answer so I can approve it, but, please, copy/paste gist code, not simply link to it – realtebo

1 Answers

8
votes

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).