404 errors on bundled jquery css, VS2012 publishing to Azure

Question

I have a web site that uses the jquery datepicker thing (implemented in regular VS2012 MVC4 template). It looks and works fine when running on localhost. But when I publish (to Azure), some of the css is missing. The Chrome dev tools show 404 errors on two css files:

http://cyclelog.azurewebsites.net/Content/jquery.ui.base.css http://cyclelog.azurewebsites.net/Content/jquery.ui.theme.css

I noticed that there are no such files in my source tree--rather the two files are under ~/Content/themes/base (not directly under Content/). I didn't know what to make of this because--like I said--the css works fine on localhost.

I have not modified the bundling config as created in the default template. Or, rather, I did, but only in an effort to fix the problem--which didn't work. I restored the original code in the bundle initialization:

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/site.css",                
            "~/Content/themes/base/jquery.ui.all.css"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
    "~/Content/themes/base/jquery.ui.core.css",                        
    "~/Content/themes/base/jquery.ui.resizable.css",
    "~/Content/themes/base/jquery.ui.selectable.css",
    "~/Content/themes/base/jquery.ui.accordion.css",
    "~/Content/themes/base/jquery.ui.autocomplete.css",                        
    "~/Content/themes/base/jquery.ui.button.css",
    "~/Content/themes/base/jquery.ui.dialog.css",
    "~/Content/themes/base/jquery.ui.slider.css",
    "~/Content/themes/base/jquery.ui.tabs.css",
    "~/Content/themes/base/jquery.ui.datepicker.css",
    "~/Content/themes/base/jquery.ui.progressbar.css",
    "~/Content/themes/base/jquery.ui.theme.css"));

Any ideas?

Answer 1

The problem is the inclusion of "~/Content/themes/base/jquery.ui.all.css" in your first bundle. Move that file to the second bundle and it will work.

It works locally because locally, bundling doesn't occur (assuming you are in debug mode). The @import in that file works because it is looking in the correct directory ("/Content/themes/base/"), since the link is rendered as:

<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet"/>

When you deploy this, that file gets bundled into ~/Content/css. The style sheet is bundled and now is rendered as:

<link href="/Content/css?v=IqLBj6MTQkC-CU1" rel="stylesheet"/>

So now the two @import statements fail since the two files do not exist in that directory.

However, they do exist in "~/Content/themes/base/" which is why it will work in the 2nd bundle, when everything gets bundled in release mode.

More reading with info on how you can replicate this issue locally: Scripts.Render using outdated javascript file