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

@S         


        

Answer 1

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

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.