ASP.NET Optimization not transforming LESS into CSS

Question

I'm having difficulty getting LESS files to be transformed to CSS using .NET's new Optimization Framework (for minification and bundling).

I have a directory which contains only LESS files.

I use the following code to bundle these together and transform them into CSS:

var lessBundle = new Bundle("~/st-style-common-2")
    .IncludeDirectory("~/Admin/Resources/styles/", "*.less");
lessBundle.Transforms.Add(new LessTransform());
lessBundle.Transforms.Add(new CssMinify());
bundles.Add(lessBundle);

I've also used the LessTransform class that is detailed here.

When debug="false" the files are transformed into standard CSS and compiled into one, as expected.

However, when debug="true" the files are not transformed, leaving a bunch of .less URLs in the HTML, which the browser doesn't understand and IIS doesn't appear to have a handler for.

I realise that I could build some handler that would serve these .less files but I don't believe that I should need to. Doesn't the Optimization Framework convert LESS to CSS even while debugging?

Answer 1

I didn't find a solution, per se, but I managed to get around this problem by using the Web Essentials plug-in which automatically converts my LESS files to CSS (as well as a minified CSS version).

This allows me to work with LESS, save the file and have a CSS version of the styling automatically compiled, and then I simply reference the CSS versions rather than the LESS versions:

bundles.Add(new StyleBundle("~/styles").Include(
            "~/Admin/Resources/styles/*.css"));