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.

Answer 1

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.