404 errors on bundled jquery css, VS2012 publishing to Azure
azure, bundling-and-minification, css, jquery-ui-datepicker, visual-studio-2012
Solution
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
Problem
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?