CODEWITHSUNDEEP
cssasp.net-mvc-4
Swifty
Swifty

Reputation: 1432

MVC jQuery UI CSS urls not resolving after deployment

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?

Upvotes: 12

Views: 4428

Answers (3)

RonVibbentrop
RonVibbentrop

Reputation: 311

After I updated my solution with nuGet package manager to the newest jqueryui -files, version 1.11, the css-files of jqueryui didn't get loaded. So I checked the BundleConfig class just to notice that jqueryui css was still using old path like:
"~/Content/themes/base/jquery.ui.theme.css"
I replaced those with:
"~/Content/themes/base/theme.css"
and then my page was back in business.

Upvotes: 0

Swifty
Swifty

Reputation: 1432

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.

Upvotes: 21

Ufuk Hacıoğulları
Ufuk Hacıoğulları

Reputation: 38468

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.

Upvotes: 3

Related Questions