Compiling LESS stylesheet files directly from Visual Studio 2013

Visual Studio 2013 is the first version of the product to support LESS stylesheet files out of the box. LESS is a new way of improving your CSS development by introducing support for variables, functions (called "mixins") and equations to make CSS writing easier and more maintainable.

Out of the box, Visual Studio 2013 doesn't come with a LESS compiler, because one of the founding ideas of LESS is that it can be processed in the browser. There's a JavaScript implementation of the LESS compiler, so that the browser can directly load the .LESS files from your IIS/ASP.NET web server, and process them on the fly to CSS.

However, this requires the browser go through an extra mile to get your page to look correct, and sometimes, you might prefer a less JavaScript-heavy implementation. One way of doing this is to pre-compile your LESS files into regular CSS files when you build your ASP.NET solution in Visual Studio.

Since Visual Studio itself cannot compile LESS files, you need some external tool to get the job done. There are many different standalone LESS compilers available, and on the Windows platform, tools like WinLESS and Koala are popular. Also remember, that if you install the Visual Studio Web Essentials extension, you get a LESS compiler, but also a CSS preview window! Highly recommended.

If you cannot or don't want to use Web Essentials, you can use an external, stand-alone LESS compiler, and integrate that with Visual Studio and your build process.

I've used WinLess myself, and it can be used to automate your compiling of LESS files to CSS. One benefit of WinLess is that it can be configured to monitor certain directories, and once activated, it will automatically compile all new and modified LESS files into CSS without you pressing a button.

Even WinLess is aimed at interactive use and works automatically in the background by monitoring a set of directories, you can still invoke the JavaScript LESS compiler (which is part of WinLess) and integrate it into (for instance) Visual Studio's pre and post build events. This way, you get a straightforward way to generate standard CSS files.

When using WniLess however, calling the LESS compiler is not immediately obvious. The compiler is itself stored in the following path by default:

C:\Program Files\Mark Lagendijk\WinLess\node_modules\less\bin

This folder contains the "lessc" LESS compiler, but it is Node.js based, and thus cannot directly run on Windows. But, WinLess comes with the Node.js runtime called "Node.exe", which can be used to launch the compiler. There's a handy Windows batch file called "lessc.cmd" in the following folder:

C:\Program Files\Mark Lagendijk\WinLess\node_modules\.bin

This batch file can be directly launched from Visual Studio. The compiler takes two parameters: the source .LESS file, and the destination .CSS file. Both names can contain full paths. For example:

lessc InputFile.less OutputFile.css

If the compilation works, no messages can be seen in the command-line window (DOS box).

All in all, the command you enter into Visual Studio's project options under Build Events could look something like this:

"C:\Program Files\Mark Lagendijk\WinLess\node_modules\.bin\lessc.cmd"
"$(ProjectDir)\Content\StyleSheet1.less" "$(ProjectDir)\Content\StyleSheet1.css"

Here, the $(ProjectDir) macro is used to point to the correct folder. If you have multiple .LESS files, you could simply add more commands, one for each file. Or better yet, you could make this a custom MSBuild build task.

Happy hacking!