MVC Bundling and CSS relative URLs

Question

MVC's bundling is returning the wrong URL in CSS images when using CssRewriteUrlTransform:

I have an intranet application whose URL is, for example: http://usid01-srv002/MyApplication. It's in IIS's "Default Web Site".

Which has the following in BundleConfig.cs:

bundles.Add(new StyleBundle("~/bundles/jcss")
    .Include("~/Scripts/JQueryUI/css/*.css", new CssRewriteUrlTransform())
);

The bundling system is generating the wrong URL for any images referenced in those CSS files, yielding 404's even JQueryUI's very well tested CSS files (from FireBug):

e.g. it's generating

http://usid01/path/foo.png

When it should be generating:

http://usid01/MyApplication/path/foo.png

How do I get the bundling system to generate a URL that points to the right location?

Answer 1

CssRewriteUrlTransform updates the CSS Url with absolute path, saying so if we use -

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",new CssRewriteUrlTransform()));

and we have following CSS class in "site.css"

.Sandy
{
    background-image: url("Images/Sandy.jpg");
    border: 1px solid #c8c8c8;
    border-radius:4px 4px 4px 4px;
    box-shadow: 1px 1px 8px gray;
    background-position:left;
    background-size:contain;
    -moz-background-size:contain;
    -webkit-background-size:contain;
    -o-background-size:contain;
    background-repeat:no-repeat;
    min-height:100px;
    min-width:100px;
    display:block;
}

and following folder structure -

   -Web site Root
   -Content
   --site.css
   --Images
   ---Sandy.jpg

Bundling will generate following CSS Url Path for "background-image" -

 background-image: url("/Content/Images/Sandy.jpg");

And now if you hosting the website / web application as a website on web server above path will work, because browser will send request for this resource using following Url because of leading '/'

http://<server>/content/images/sandy.jpg

but if you host the website as web application this will create problem. Because browser will still interpret this as absolute Url instead of relative and still send following request to fetch this resource -

   http://<server>/content/images/sandy.jpg

So, the solution for this problem is using the relative Url even in CSS file and then remove the CssRewriteUrlTransform from the Bundle config as below -

background-image: url("Images/Sandy.jpg");

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

Answer 2

The reason for the broken images is that it tries to find the images relative to the new path defined during bundling i.e.

bundles.Add(new StyleBundle("~/Content/woothemes").Include(
            "~/Content/woothemes/css/style.css",
));

So if there is any image path (i.e. background image) defined in style.css, it will try to get its path relative to Content/woothemes instead of Content/woothemes/css/, hence the images will not be found

One workaround to overcome the issue for the files of same folder is to define the new path same as that of the folder (whose files are being minified) i.e.

bundles.Add(new StyleBundle("~/Content/woothemes/css").Include(
            "~/Content/woothemes/css/style.css",
));

This way the bundled files and the actual files path will match and the images defined in the css will be found, hence the issue will be resolved

The issue will only not be resolved if you mix the files from different folders for the same reason described above

Answer 3

This works for me,

<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/content/styles/css")" rel="stylesheet" type="text/css" />