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://us

Answer 1

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