ASP.NET MVC 4 缩小和背景图像答案

【问题标题】：ASP.NET MVC 4 Minification & Background ImagesASP.NET MVC 4 缩小和背景图像
【发布时间】：2012-04-04 12:35:13
【问题描述】：

我目前正在使用 ASP.NET MVC 4 CSS/JavaScript 优化器。它适用于我自己的 CSS/JavaScript，但我也想将它与插件一起使用。每个插件都有自己的文件夹：

~/Content/css // my own css, ok
~/Content/plugins/rateit
~/Content/plugins/chosen
~/Content/plugins/...

我可以将此文件添加到优化器：

var bundle = new Bundle("~/Content/opt", new CssMinify());
...
bundle.AddFile("~/Content/plugins/chosen/chosen.css", "*.css");
BundleTable.Bundles.Add(bundle);

但是在这种情况下，优化后css在另一个文件夹中，浏览器再也找不到背景图片了。有没有办法自动修改背景图片的css路径？

我可以将所有插件复制到一个文件夹中，但是插件很多，这不是一个好主意。

【问题讨论】：

标签： css asp.net-mvc-4

【解决方案1】：

可以看看RequestReduce。这是另一个基于 .net 的缩小器/捆绑器，它会将缩小/捆绑的 css 中的所有 url 重写为绝对的。这包括字体和背景图像。它还将自动扩展 css 中的任何导入。此外，在它认为可以的地方，它会精灵化背景图像。

【讨论】：

我已经使用过RequestReduce。它工作完美，除了 JavaScript 的一小部分不再工作。使用 MVC 4 缩小我没有这个问题，但我也不能最小化插件。
如果您可以在 github.com/mwrock/RequestReduce/issues 的 RequestReduce 问题中添加一个问题，那就太好了，这样我就可以解决这个 javascript 问题了。
我使用 RequestReduce 将代码回滚到旧版本。经过长时间的搜索，我发现这部分 JavaScript 无法正常工作，因为 Chrome 中带有 Adblock 的 Bug。通过一个小修复它可以正常工作。所以这不是 RequestReduce 错误:-)
@MattWrock - 您必须在回答中披露您与该产品的从属关系，请参阅the FAQ - May I promote here?。话虽如此，RequestReduce 看起来很适合这个问题。内置捆绑的另一个流行替代方案是Cassette。
为什么不将 CSS 路由修改为相对于站点根目录是绝对的？对几个文件进行简单的查找替换

【解决方案2】：

我遇到了同样的问题...我曾经将 jQuery UI CSS 与我自己的捆绑在一起，但正如您所提到的，插件使用它自己的目录。在我的情况下是：

~/Content/Site.css
~/Content/themes/base/*.css

这个压缩包会查找 ~/Content/ 中的所有图像，因此 jQuery UI 会停止正常工作。所以解决这个问题的唯一方法是将这些 CSS（我自己的和 jQuery UI 的一个）分开。

顺便说一句：在此之前，我不明白为什么 CSS 捆绑（在 MVC4 模板中）为 ~/content/ 而不是 ~/bundles/。现在我知道这是因为Content 目录中的图像路径有问题。

【讨论】：

@hobo 我听从了你的建议，我的图像路径问题得到了解决，对于所有其他有相同问题的人，我建议保留与路径相同的包名称，但在末尾添加另一个“/css”捆绑包名称。因此，如果路径是-“~/content/css”，则捆绑包名称应该是-“~/content/css/css”，这将有助于解决图像的相对路径问题。