How to include LESS files in web page using Web Essentials?

Question

I have installed web essentials 2013 and I created a default MVC project for testing purposes to try LESS functionality.

I removed all the bootstrap CSS files and i put a folder named less inside Content with all the bootstrap's .less files but when i right click on them the web essentials menu is all grayed out and it doesn't compile anything... How can I include less files inside a web page with auto compile using Web Essentials. Is that possible?

The settings of web essentials are the following:

"Less": {
    "CompileOnBuild": true,
    "CompileOnSave": false,
    "EnableChainCompilation": true,
    "GenerateSourceMaps": true,
    "MinifyInPlace": false,
    "OutputDirectory": "css",
    "ProcessSourceMapsForEditorEnhancements": true,
    "ShowPreviewPane": true,
    "StrictMath": false
}

Answer 1

Just configure your Web Essentials to compile on save and build. That way you can always manually generate the CSS by saving the LESS file.

Optionally, you can configure Web Essentials to minify the generated CSS:

Also add a StyleBundle which loads the generated minified CSS file:

bundles.Add(new StyleBundle("~/bundles/css").Include("~/Content/bootstrap.min.css"));