Relative paths in CSS not valid when using MVC w/Bundles

Question

I've been developing a MVC5 web application for several months. I've published to each of 3 servers used for development, testing and the intended public server. Everything has been tested by a team of a dozen beta testers and a decision was made to go live with the web app this weekend.

Prior to publishing the web app to the live (public) host I modified the web.config to disable debug mode for the public site. After publishing, all kinds of problems cropped up related to missing CSS and JS resources.

After reading a lot of articles regarding Bundles and 404 errors, I found one that hinted to add the following to Web.config:

<modules runAllManagedModulesForAllRequests="true">
  <remove name="BundleModule" />
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>

This resolved the 404 issues for the StyleBundle and ScriptBundle configurations, but now I have 404 errors for images that previously worked fine. I'm not sure of the best way to resolve these. I don't want to relocate the images and I don't want to edit the CSS since these are distribution files (jQueryUI, ThemeRoller, DataTables, etc). I want to leave their distribution folder structure and original source files (CSS and JS) unmodified.

An example of the problem.

DataTables distribution is in my ~/Scripts folder:

/Scripts/DataTables-1.10.2/
/Scripts/DataTables-1.10.2/media/css
/Scripts/DataTables-1.10.2/media/images
/Scripts/DataTables-1.10.2/media/js

Bundles configuration:

bundles.Add(new ScriptBundle("~/bundles/DataTables").Include(
     "~/Scripts/DataTables-1.10.2/media/js/jquery.dataTables.js"));

bundles.Add(new StyleBundle("~/bundles/DataTables.css").Include(
     "~/Scripts/DataTables-1.10.2/media/css/jquery.dataTables.css"));

jquery.dataTables.css contains references to ../images/someimage.png and with Web.config debug mode enabled this works flawlessly. Now that debug mode has been disabled and Bundles are minifying/combining, I am getting 404 errors:

http://example.com/GenericError.htm?aspxerrorpath=/images/someimage.png"

It seems as though the image URL is now assumed to be relative to /Bundles/ - though I'm not positive.

There must be an additional configuration I'm missing. Can someone point me in the right direction?

EDIT

Raphael's comments on this question and his URL to another similar SO question did not help to resolve this problem. Sean's recommendation of BundleTransformer seems like it might work but I don't find any documentation on how to install this package.

I've been reading articles on this issue for 6 hours now. The Internet and SO is loaded with them. Some of the articles don't make any sense to me. They don't even have accepted answers. I'm going to review the link you provided - can't you just point to a possible answer without policing for duplicates? It's just weird... — rwkiii
Raphael, have you ever consider how many times you have said "Possible duplicate...". Your duplicate policing becomes problematic and redundant in itself. It gets very old. You're not going to stop duplicates. I've asked my question in a different manner with difference examples. With your reputation it would seem there's somebody, somewhere on SO with a question that's appropriate for you to answer? — rwkiii
Thank you for cluttering my question with your point of view on duplicates. Did you really think you would get a "thank you" from me for commenting on everything related to this question and encouraging prospective help to close my question? Get real. You've made 4 comments here now. As many as me, but your comments are useless and destructive. — rwkiii

Sean Amos Sean Amos · Accepted Answer · 2014-09-12T09:49:51

See my answer at: CSS/JS bundle in single file in mvc when publish with release option

It deals with this exact issue and the options you have to resolve it.

Relative paths in CSS not valid when using MVC w/Bundles

1 Answers