CODEWITHSUNDEEP
c#asp.net-mvc-4lessbundleminify
sergserg
sergserg

Reputation: 22234

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

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?

Upvotes: 12

Views: 12990

Answers (4)

sergserg
sergserg

Reputation: 22234

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.

Upvotes: 3

Kambiz Shahim
Kambiz Shahim

Reputation: 2590

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);

Upvotes: 11

jan salawa
jan salawa

Reputation: 1208

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";

Upvotes: 0

Daniel Powell
Daniel Powell

Reputation: 8293

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.

Upvotes: 0

Related Questions