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

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.

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.

I'm not sure if it's the web optimization, or WebGrease that is so picky but one (or both) of them is and you need to be extremely careful.

First of all there is nothing wrong with your code:

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

In fact this is exactly what Microsoft does. The main reason they don't use ~/bundles for css is that relative paths get screwed up for images. Think about how your browser sees a bundle - exactly the same way as it sees any other URL, and all the normal path related rules still apply with respect to relative paths. Imagine your css had an image path to ../images/bullet.png. If you were using ~/bundles the browser would be looking in a directory above bundles which doesn't actually exist. It will probably end up looking in ~/images where you probably have it in ~/content/images.

I've found a couple things that can really break it and cause 404 errors:

• FYI: My directory structure is Content/CSS which contains an images folder for CSS images.
• I have EnableOptimizations=true to force use of bundles while testing
• First thing you should do is 'View Source' and just click on the css links to see if they work

Let's say we're developing a site about cats. You may have this

 @Styles.Render("~/Content/css/cats.css")    // dont do this - see below why

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

This generates a CSS link to this path in your HTML:

/Content/css/cats.css?v=JMoJspikowDah2auGQBfQAWj1OShXxqAlXxhv_ZFVfQ1

However this will give a 404 because I put an extension .css and IIS (I think) gets confused.

If I change it to this then it works fine:

 @Styles.Render("~/Content/css/cats")

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

Another problem already pointed out by others is you must not do

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

if you have a css directory or file (unlikely you'd have a file called css with no extension) in your Content directory.

An additional trick is that you need to make sure your generated HTML has a version number

<link href="/Content/css/cats?v=6GDW6wAXIN5DJCxVtIkkxLGpojoP-tBQiKgBTQMSlWw1" rel="stylesheet"/>

If it doesn't and looks like this, then you probably don't have an exact match for the bundle name between your Bundle table and in your cshtml file.

<link href="/Content/css/cats" rel="stylesheet"/>

Don't forget to ensure the bundling HttpModule is there.

<modules>  
  <remove name="BundleModule" />  
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />  
</modules>

This stung me first time around. Not sure if the necessary config should be added by the NuGet package, but it wasn't in my case.