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?

Did you bundle your CSS files?

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

2013-08-12 10:44:35 +00:00
Commented Aug 12, 2013 at 10:44 — Ufuk Hacıoğulları
– Ufuk Hacıoğulları, Commented Aug 12, 2013 at 10:44
Yes, they're all bundled.

Swifty
– Swifty

2013-08-12 10:47:36 +00:00
Commented Aug 12, 2013 at 10:47 — Swifty
– Swifty, Commented Aug 12, 2013 at 10:47
Can you post relevant part of your BundleConfig?

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

2013-08-12 10:48:39 +00:00
Commented Aug 12, 2013 at 10:48 — Ufuk Hacıoğulları
– Ufuk Hacıoğulları, Commented Aug 12, 2013 at 10:48
Updated it in the OP.

Swifty
– Swifty

2013-08-12 10:55:03 +00:00
Commented Aug 12, 2013 at 10:55 — Swifty
– Swifty, Commented Aug 12, 2013 at 10:55
Why not use the <base> tag in your HTML?

Ahmad Alfy
– Ahmad Alfy

2013-08-12 10:57:01 +00:00
Commented Aug 12, 2013 at 10:57 — Ahmad Alfy
– Ahmad Alfy, Commented Aug 12, 2013 at 10:57

Swifty · Accepted Answer · 2013-08-12 12:26:54Z

21

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.

answered Aug 12, 2013 at 12:26

Swifty

1,4422 gold badges19 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cody Over a year ago

Just a note that the style bundle virtual path should be different than the actual location...this got me stuck for a few minutes.

iCollect.it Ltd Over a year ago

To confirm, you absolutely should not use an actual file of folder path as the bundle name. This will cause IIS to try and load the directory or file instead of the bundle.

Ufuk Hacıoğulları · Accepted Answer · 2013-08-12 10:57:57Z

3

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.

answered Aug 12, 2013 at 10:57

Ufuk Hacıoğulları

38.6k14 gold badges120 silver badges157 bronze badges

Comments

RonVibbentrop · Accepted Answer · 2015-06-11 07:05:23Z

0

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.

answered Jun 11, 2015 at 7:05

RonVibbentrop

3114 silver badges4 bronze badges

Collectives™ on Stack Overflow

MVC jQuery UI CSS urls not resolving after deployment

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related