MVC jQuery UI CSS urls not resolving after deployment

Question

The title pretty much says it all. In the jquery-ui.css it defines styles like:

ui-widget-content {
border: 1px solid #aaaaaa/*{borderColorContent}*/;
background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*
color: #222222/*{fcContent}*/;
}

This works fine in dev, but once deployed the url no longer resolves. The site is deployed under the default web site in IIS7. So in the browser console I can see that its looking for the image in

http:// (servername)/(appName)/Content/images/ui-bg_glass_75_e6e6e6_1x400.png

instead of

http:// (serverName)/(appName)/content/themes/base/images...

Here is the bundle config:

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

How can I make these URLs resolve correctly?

Answer 1

Ufuk's answer got me thinking. Appending the app name to the front of the bundle's virtual path broke all my styles.

The bundle function takes all the CSS files inside the include statement and minifies them into one file located at the URL specified in the bundle's virtual path. The urls specified in the CSS files included in this bundle uses the bundle's given virtual path to build up its URL at runtime. This works fine in dev because dev does not utilize the bundles, it references each css file individually/directly.

The solution was to create a bundle with the correct virtual path:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery-ui.css")):

Thanks Ufuk for the advice and guidance.

Answer 2

You should update your bundle's virtual path like this:

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

This way relative URLs in your CSS file will start from ~/appName. Keep this in mind if you have other relative URLs in site.css file.