ASP.NET 4.5 MVC Bundling and Minification troubleshooting

ASP.NET 4.5 includes the System.Web.Optimization namespace (it can also be added via NuGet).  This library provides functionality to bundle and minify (B/M) your scripts and stylesheets.

Running some tests today, I noticed that my css image links were breaking whenever I enabled the B/M optimizations. Researching this, I realized I was using relative paths for the images in my CSS files. When B/M occurs, the pseudo path is used to resolve to the B/M’d files, which is usually different from the physical path of the files. In my case, the physical path was at ~/public/css and the B/M pseudo path was ~/bundle/css. Since my images are located in ~/public/images, the relative paths were no longer resolving.

Thinking this would be an easy fix, I changed the B/M pseudo path to mirror the physical path ~/public/css. Unfortunately, this broke my css entirely. Checking the server response, I saw that I was getting a 403.14 error.

Turns out the MVC router blocks calls for B/M files that resolve to actual paths in the project. This is expected behavior, since the router is always called first and is simply doing it’s job (duh)!

The easiest fix for this is to simply change the pseudo path to one level lower than the actual path (in my case, changing it to ~/public/css/bundle). The CSS file will then properly resolve all the relative image paths, regardless of whether or not B/M is on.


One Comment

  1. Posted November 19, 2014 at 2:09 am | Permalink | Reply

    Thanks mate for sharing this. It did help me in figuring out the problem I was getting.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: