MVC4 - Bundling does not work when optimizations are set to true

Question

I wonder what I don't do correct here. I am using ASP.NET C# MVC4 and I want to take use of new css/js optimization feature.

Here is my HTML part

@Styles.Render("~/content/css")

Here is my BunduleConfig.cs part

bundles.Add(new StyleBundle("~/content/css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

// BundleTable.EnableOptimizations = true;

Output (works):

<link href="/content/css/reset.css" rel="stylesheet"/>
<link href="/content/css/bla.css" rel="stylesheet"/>

However when I uncomment BundleTable.EnableOptimizations = true; html output looks like this

<link href="/content/css?v=5LoJebKvQJIN-fKjKYCg_ccvmBC_LF91jBasIpwtUcY1" rel="stylesheet"/>

And this is, of course is 404. I have no idea where I did something wrong, please help, first time working with MVC4.

Answer 1

I imagine the problem is you putting the bundle at a virtual URL that actually exists, but is a directory.

MVC is making a virtual file from your bundle and serving it up from the path you specify as the bundle path.

The correct solution for that problem is to use a bundle path that does not directly map to an existing directory, and instead uses a virtual file name (that also does not map to a real file name) inside that directory.

Example:

If your site has a folder named /content/css, make your css bundle as follows:

In BundleConfig.cs:

bundles.Add(new StyleBundle("~/content/css/AllMyCss.css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

And on the page:

@Styles.Render("~/content/css/AllMyCss.css")

Note that this assumes you do NOT have a file named AllMyCss.css in your css folder.