ASP.Net MVC4 bundle for less files not being rendered when debug set to false

Question

In a simple ASP.Net MVC4 test application, I installed the dotless NuGet package and followed this tutorial.

My .less files are being correctly parsed to CSS and work fine when debug=true.

<link href="/Public/less/main.less" rel="stylesheet"/>
<link href="/Public/less/home.less" rel="stylesheet"/>
<link href="/Public/less/a.less" rel="stylesheet"/>
<link href="/Public/less/b.less" rel="stylesheet"/>
<link href="/Public/less/c.less" rel="stylesheet"/>

However when I set debug=false in order to have it minify and combine to a single stylesheet, I get this:

<link href="/Public/less?v=" rel="stylesheet"/> // NOT WORKING!

Here's my bundle configuration file; again, taken directly from the tutorial:

public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {

        // Compile .less files and create a bundle for them.
        var lessBundle = new Bundle("~/Public/less").Include(
                                                        "~/Public/less/main.less",
                                                        "~/Public/less/home.less",
                                                        "~/Public/less/a.less",
                                                        "~/Public/less/b.less",
                                                        "~/Public/less/c.less");
        lessBundle.Transforms.Add(new LessTransform());
        lessBundle.Transforms.Add(new CssMinify());
        bundles.Add(lessBundle);
    }
}

And in my Layout file:

<head>
    @Styles.Render("~/Public/less")
</head>

And here's my LessTransform class:

public class LessTransform : IBundleTransform
{
    public void Process(BundleContext context, BundleResponse response)
    {
        response.Content = dotless.Core.Less.Parse(response.Content);
        response.ContentType = "text/css";
    }
}

Any ideas on why the bundle is not working properly on debug=false?

Can you try with this answer: http://stackoverflow.com/questions/9593254/mvc4-less-bundle-import-directory He uses BundleTransformer.Less package. It might help you... — freshbm, Mar 25 '13 at 14:33

Kambiz Shahim · Answer 1 · 2013-03-29T19:01:50.037

Bundling and Minification in MVC 4.0 by default is disable in debug mode, because minification and bundling make debugging very hard or even sometimes impossible. You can test it by setting a break point on LessTransform.Process method. LessTransform.Process only invoked when the project run with debug = false or BundleTable.EnableOptimizations = true.

<link href="/Public/less?v=" rel="stylesheet"/> means the result of the bundle was empty.

Please make sure at least one of the less files produce the CSS content, if so check the LessTransform class it must be:

public class LessTransform : IBundleTransform
{
    void IBundleTransform.Process(BundleContext context, BundleResponse response)
    {
        response.Content = Less.Parse(response.Content);
        response.ContentType = "text/css";
    }
}

By putting BundleTable.EnableOptimizations = true; in RegisterBundles method you can override default setting of optimization mechanism (Bundling and minification) in debug mode then you can debug and check the result of Less.Parse(response.Content);

I double checked and the `LessTransform` class has the proper code inside to transform less into css. Any other ideas? — sergserg, Mar 30 '13 at 21:10
This is the correct answer and should be accepted because this is exactly what OP said he did in the answer he posted himself. — Umar Farooq Khawaja, Mar 31 '13 at 00:02
I've accepted this answer, but something worth mentioning is that an error in the `less` file will fail **silently** and become an empty bundle. That's why I posted my own answer - hopefully it helps someone. — sergserg, Apr 01 '13 at 03:32

score 3 · Accepted Answer · answered Mar 30 '13 at 23:25

The issue was a silent error when compiling the .less into css.

I used a breakpoint to check my LessTransform class which uses the dotless library to compile.

public class LessTransform : IBundleTransform
{
    public void Process(BundleContext context, BundleResponse response)
    {
        response.Content = Less.Parse(response.Content); // Breakpoint here.
        response.ContentType = "text/css";
    }
}

I noticed that when hovering over response.Content I could see my less code, but after the Less.Parse code, response.Content would become empty.

I ran my less code through a checker and noticed a syntax error in my code.

Once I fixed my error, the bundling and minification worked properly as expected.

score 0 · Answer 3 · answered Mar 25 '13 at 00:31

Unless I'm misunderstanding what you've said doesnt make sense.

When you have debug = true it would appear that your style sheets are not being bundled as they are being referenced individually hence not minified/bundled into a single file, this is expected when debug is set to true so that you can easily debug your scripts/styles without having to wade through minified and bundled code.

When you have debug = false it would appear that minification/bundling is occuring as you are getting only two urls.

One thing that does look odd is that the less url does not have a hash associated with it ie. v= is blank, this might be something to look into.

You can also try to load the url <localaddress>/Public/less?v= in your browser and see what it returns if it has trouble minifying/bundling it will usually give you a warning at the top of the file.

jan salawa · Answer 4 · 2013-03-28T08:51:11.003

0

Looks like you have empty less files. So it's normal that hash wasn't generated.

Just so you know. You don't need to use bundle for less files. You can use import keyword insinde less to combine files. @import "a.less";

edited Mar 28 '13 at 08:51

answered Mar 28 '13 at 08:34

jan salawa

1,198
1
8
25

1

My less files are not empty, they work just fine when `debug` is set to true. – sergserg Mar 30 '13 at 21:08
Why did you downvote me? I gave you advice how to solve the problem and you completely ignored it... – jan salawa Mar 30 '13 at 21:24

ASP.Net MVC4 bundle for less files not being rendered when debug set to false

4 Answers4