使用带有捆绑包的 MVC 时，CSS 中的相对路径无效

Question

几个月来，我一直在开发 MVC5 Web 应用程序。我已经发布到用于开发、测试和预期公共服务器的 3 个服务器中的每一个。一个由十几名 Beta 版测试人员组成的团队对所有内容进行了测试，并决定在本周末上线该网络应用程序。

在将 Web 应用程序发布到实时（公共）主机之前，我修改了 web.config 以禁用公共站点的调试模式。发布后，各种 CSS 和 JS 资源缺失的问题接踵而至。

在阅读了很多关于 Bundles 和 404 错误的文章后，我找到了一篇暗示将以下内容添加到 Web.config 的文章：

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

这解决了 StyleBundle 和 ScriptBundle 配置的 404 问题，但现在我遇到了以前工作正常的图像的 404 错误。我不确定解决这些问题的最佳方法。我不想重新定位图像，也不想编辑 CSS，因为这些是分发文件（jQueryUI、ThemeRoller、DataTables 等）。我想不修改他们的分发文件夹结构和原始源文件（CSS 和 JS）。

问题的一个例子。

DataTables 分布在我的 ~/Scripts 文件夹中：

/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.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 包含对 ../images/someimage.png 的引用，并且启用了 Web.config 调试模式可以完美运行。现在调试模式已被禁用并且捆绑包正在缩小/组合，我收到 404 错误：

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

现在似乎图像 URL 被认为是相对于 /Bundles/ 的——尽管我并不肯定。

我必须缺少一个额外的配置。有人能指出我正确的方向吗？

编辑

Raphael 在这个问题上的 cmets 以及他对另一个类似 SO 问题的 URL 无助于解决这个问题。 Sean 对 BundleTransformer 的推荐似乎可行，但我没有找到有关如何安装此软件包的任何文档。

Answer 1

请参阅我的答案： CSS/JS bundle in single file in mvc when publish with release option

它处理这个确切的问题以及您必须解决它的选项。