LESS & Bootstrap Wont Compile

1
votes

I am pretty new to LESS, but I think I have the right idea. However, I can't get the LESS to compile. I've downloaded 3 compilers now (Crunch, Simpless,Winless).

Crunch I get an error of 

Compiler Errors variable @navbar-default-bg is undefined (Line: 15)

WinLESS - I get a "sucess" but see no CSS generated.

Simpless - just doesn't build or error. Nothing happens.

Here is what I'm doing. I have the Cerulean bootstrap template http://bootswatch.com/cerulean/. You can download the bootswatch.less & variables.less I am making ZERO modifications to them. From my understanding of how this works (& best practices) I import my CSS and less files into one less file, which then compiles the LESS and move the CSS into one CSS I reference in my asp.net page. I've called this file "IMSLess.less" which looks like this....

@import "bootstrap.min.css";            // xxxxxxxxxx
@import "variables.less";               // xxxxxxxxxx
@import "bootswatch.less";              // xxxxxxxxxx

Import of the bootstrap.min.css template, followed by the 2 UNEDITED less files. Like I said i'm pretty new at this, so I could have this set up incorrectly, which could be causing my error, but hopefully someone can help!

Thank you Josh

3
htmlcsstwitter-bootstrapless

3 Answers

1
votes

The trick is being able to easily update Bootstrap without having to copy over files or re-add an @import.

  1. Download the Bootstrap source files and leave them untouched.
  2. Download the two files from Bootswatch (variables.less and bootswatch.less) and put them in their own directory

  3. In the same directory, create a new less file. Name give it a name like custom-bootstrap.less and add something like the following:

    @import "../bootstrap/less/bootstrap"; @import "bootswatch"; @import "variables";

  4. Compile custom-bootstrap.less and use that css file in your html.

Then when you upgrade Bootstrap, you can just replace the bootstrap source files and recompile custom-bootstrap.less.

Source: http://www.smashingmagazine.com/2013/03/12/customizing-bootstrap/ (Article is apparently written by the creator of Bootswatch)

0
votes

I don't use Bootswatch so I could be wrong but this is how I think it works...

bootstrap.css / bootstrap.min.css = compiled less files from Bootswatch and Bootstrap. If you aren't changing any of the LESS variables this is all you need and they are standalone.

variables.less / bootswatch.less = the variables/css that Bootswatch changes, these are used to complement the original Bootstrap LESS files. To use these you need to compile them along with the Bootstrap LESS files which you need to download from Bootstrap (not Bootswatch).

For more info take a look at:

Bootstrap: Using Less

Bootstrap: Compiling CSS and JavaScript

0
votes

So what I did here is grabbed the source code of bootstrap. (http://getbootstrap.com/). Then I used the 2 bootswatch less files from my Bootswatch template (http://bootswatch.com/cerulean/). The Bootswatch site will have its own version of the "variables.less". I overwrote the "variables.less" from the source. Then in the boostrap.less i added the reference the bootswatch.less.

@import "bootswatch.less";

I then used Crunch (http://crunchapp.net/) to compile ONLY the bootstrap.less file. When you "Crunch" the bootstrap.less file you will end up with a boostrap.css file that you reference in your site. Of course you change change the variables.less file to fit your needs.

Huge caveat, I couldn't get this to work with SimpLESS or WinLess compilers, not sure why, but Crunch was the only one that worked.

Hope this helps others!

Thanks Josh