How to compile Bootstrap LESS source in VS 2013

Question

I have visual studio 2013 Ultimate Update 4 plus Web Essentials installed and updated.
I download bootstrap V3.3.1 source I copied the css, js, fonts and less folder to visual studio.

Now I want to compile all .less files after my edits there to overwrite the bootstrap.css file, I selected all files in solution explorer and right click but all Web Essentials menu items disabled.

What are the steps I should follow to compile all files to .css file or should I use a different tool than Web Essentials?

Answer 1

For the record the current Web Essentials will re-compile any compiled files when edits occur, including non CSS generating files like variables.less. You just need to manually edit them the first time to put them into this mode. For example the procedure for new projects which want to re-brand Bootstrap variables is:

1. Make sure the current Web Essentials Visual Studio package is installed.
2. Add the Bootstrap Source NuGet package to the site.
3. Manually edit the files you want automatically generated normally, e.g. /Content/bootstrap/bootstrap.less and theme.less. When you save the first compilation will occur, generating .css and min.css as related items in the Solution Explorer.
4. Now when you edit related files (e.g. variables.less to do branding) the compiled bootstrap and theme CSS is automatically updated during build.

The only dirty part about this is the first time you have to edit the original source, changing the timestamp. Hopefully that does not cause problems with updates to the NuGet package in the future.

There is an open issue in the Web Essentials project about this. One simple solution is to get the context menu option to do it manually the first time, the other is a permanent setting on the file in Visual Studio, such as the build action or custom tool action.

https://github.com/madskristensen/WebEssentials2013/issues/1632

You can change the behaviour of recompilation in the Visual Studio "Tools - Options - Web Essentials - LESS" settings.