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

3
votes

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
}
1
cssasp.net-mvcvisual-studiolessweb-essentials
I use web essentials but do not bother with the compiling. I just add the less.js file (for compiling in the browser) and reference the styles.less (or whatever yours is called). this way anybody that uses a project (another member on the team) that doesn't use web essentials will always have the compile files - Rob Scott
@RobScott Hmm...in/for production? - EdSF
precisely what I'm talking about. only for production what you'd do is compile the LESS file (I use WinLESS) into the CSS (or use web essentials I guess), comment out the ref to the JS file and the LESS file, and uncomment the main CSS file (or min.css). I'm sure there's easier ways to do it, this is just what my team and I do b/c they don't use web essentials - Rob Scott

1 Answers

1
votes

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.

LESS Options

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

CSS Options

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

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