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?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With