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

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