Dotless failing to compile ; in Bootstrap 3 less source

Question

I use dotless 1.3.1.0 compiling less-files. This worked fine with bootstrap 2.x, but after switching to bootstrap 3.0.0 (downloaded the source from here: http://getbootstrap

Answer 1

I have put together an httphandler which will compile less using lessjs.

It's more of a proof of concept than production quality code, however it may be useful for some people as a starting point.

You can find the source here:

https://bitbucket.org/martinbooth/clearscriptless

In case anyone is interested in trying to do this using jurassic, you can find my attempt here:

https://bitbucket.org/martinbooth/jurassicless

I don't recommend Jurassic for this because

• it required a few bug fixes to the library which are not currently integrated into the main project My changes are now in the master branch of Jurassic so this is no longer an issue (though the latest release does not currently include them)
• it is very slow, hence the reason I tried clearscript

Answer 2

After spending hours on getting this to work myself i found that dotless is quite useless at this time.

but here is where you can impliment Less and Bootstrap 3 Less in your mvc ASP.Net Project

http://www.tomdupont.net/2013/10/bootstrap-3-less-bundling-and-aspnet-mvc.html?showComment=1386250367416#c1439130135847828203

This guy just won an internets in my book and if you can track down his stack exchange account for me let me know.

Answer 3

If you check out bootstrap's getting started page, you'll find that they state:

LESS compilation

If you download the original files, you need to compile Bootstrap's LESS files into usable CSS. To do that, Bootstrap only officially supports Recess, Twitter's CSS hinter built on top of less.js.

Though not using dotless, I followed a similar path that you did using lessc, and then found that using recess resolved my issue. Perhaps using recess would be an option for you too?

As an example, I have a file called tmpfl.less with the following contents:

@import "mixins.less";
@import "variables.less";


.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

If I run lessc on it, I get the following result:

lessc tmpfl.less 
NameError: .size is undefined in mixins.less:47:0
46 // Sizing shortcuts
47 .size(@width; @height) {
48   width: @width;

Now, I successfully use recess as follows:

recess --compile tmpfl.less > tmpfl.css

Update:

In order to utilize Recess in a .Net environment, specifically in Visual Studio, one can follow these instructions for details on installing. Those instructions provide an overview, but perhaps leave out some details on getting Node.js installed. Microsoft has some brief words about it and they link to a GitHub project which might be helpful depending on your version of Visual Studio.

If you don't go down the Node.js-in-Visual Studio route, then really the main goal is to have Node.js installed somewhere, and then ultimately npm, the package manager for Node.js so you can install Recess. That can be achieved on Windows by going to the Node.js download, and installing the Windows version. Installing npm is highlighted in this stackoverflow discussion. Once installed, you just need to run npm to install Recess as follows:

npm install recess -g

That is also discussed in the first link of this update.

Answer 4

One of my colleagues that uses dotless has had a few fixes for Bootstrap 3 issues merged. Apparently Bootstrap3 will now compile with the latest code :)

https://github.com/dotless/dotless/commits/master

I expect an updated NuGet package will be available soon (based on this tweet)