How to compile Bootstrap LESS source in VS 2013

Question

I have the 2013 Ultimate Update 4 Visual Studio Plus Web Essentials installed and updated.
I load bootstrap V3.3.1 source I copied css, js, fonts and less folder for visual studio.

Now I want to compile all .less files after my changes in order to overwrite the bootstrap.css file, I selected all the files in the solution explorer and right-clicked, but all the menu items of Web Essentials were disabled.

What are the steps that I must follow to compile all the files into a .css file, or should I use a tool other than Web Essentials?

Answer 1

For recording, current Web Essentials will recompile any compiled files when editing, including non-CSS generation files such as variables.less. You just need to manually edit them for the first time to put them in this mode. For example, the procedure for new projects that want to rename Bootstrap variables:

• Verify that the current Web Essentials Visual Studio package is installed.
• Add the NuGet Bootstrap source package to your site.
• Manually edit the files you want to automatically generate, for example, /Content/bootstrap/bootstrap.less and theme.less. When you save the first compilation, .css and min.css will be generated as related items in Solution Explorer.
• Now that you are editing related files (e.g. variables.less to do branding), the compiled download and CSS theme are automatically updated at build time.

The only dirty part about this is the first time you need to edit the original source by changing the timestamp. I hope this does not cause problems with future updates to the NuGet package.

There is an open problem in the Web Essentials project. One simple solution is to manually configure the context menu option for the first time, and the other is a permanent parameter in the file in Visual Studio, such as an assembly action or a custom tool action.

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

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