Can Visual Studio 2013 generate CSS files from .le

Question

Visual Studio 2013 is awesome, now with syntax highlight and autocomplete for .less files. But does it also generate the respective CSS files? Do I need to install other extensions for that?

Answer 1

Yes, Visual Studio 2013 doesn't come with a LESS compiler built-in so you'll need to bring your own. You can either use an external compiler, or install an extension so you can compile your LESS files from within the IDE.

Answer 2

If you don't want to install plugins in your Visual Studio, you can use an external compiler.

Currently I'm using Koala, every time you save your LESS file he will compile it automatically in your output folder.

Take a look at the official LESS page about GUI Compilers.

Answer 3

Easy:

1. Tools->Extensions and Updates-> Install Web Extension Pack(Mads Kristensen's)
2. On Project, Add->New Item-> Less Style Sheet
3. Edit the .less and save the file
4. Right Click on the .less file-> Web Compiler-> Re-Compile File

Afterwards the resulting .css file will be generated on every file save.

Answer 4

You can also use Chirpy which allows editing of many modern web technologies that MS missed.

http://chirpy.codeplex.com/

Answer 5

Another small tool to compile LESS after it has been saved is WinLess.

Not much options but small and simple. And it does the job!

http://www.winless.org/

Don't know what the experience of other users is, but WebEssentials 2013 does not work well on my machine with Visual Studio 2013 (Ultimate) and the settings, well... No UI and can't turn features completely off which i don't want to use.

Answer 6

I had trouble compiling Bootstrap LESS (after installing the Twitter.Bootstrap.Less NuGet).

The trick with WebEssentials is to cause the bootstrap.less file to need saving (typing a space, then pressing delete is sufficient), then saving it. The corresponding .css, .min.css and css.map files are automatically generated and appear nested under the .less file in Solution Explorer.