MVC4捆绑误导背景图像网址答案

【问题标题】：MVC4 Bundling misdirect background-image urlMVC4捆绑误导背景图像网址
【发布时间】：2013-09-03 01:36:47
【问题描述】：

我有这个捆绑配置：

bundles.Add(new StyleBundle("~/styles/style1").Include("~/Content/library/styles/style1.css")

然后我添加了这段代码来渲染捆绑的 CSS：

@Styles.Render("~/styles/style1")

我的 CSS 有这个内容：

.style1 {
  background-image: url("../img/image.png");
}

由于捆绑，背景图像的路径被错误定向到 ~/Content/library/img/image.png 而不是 ~/img/image.png。我不想编辑 CSS 文件路径，因为许多其他页面正在使用它。你知道它的任何解决方案还是我在捆绑时缺少配置？

【问题讨论】：

【解决方案1】：

您需要申请 CssRewriteUrlTransform 来解决此问题：

bundles.Add(new StyleBundle("~/styles/style1")
                .Include("~/Content/styles/style1", new CssRewriteUrlTransform())

或者，您也可以在样式表中使用绝对路径。

PS：如 cmets 所述，您必须通过 Codeplex 或 NuGet 将 Web Optimization Package 添加到您的项目中，才能使用 CssRewriteUrlTransform 类 p>

【讨论】：

是VS2012内置的CssRewriteUrlTransform类吗？
尝试添加对System.Web.Optimization的引用。如果找不到，请看这里：aspnetoptimization.codeplex.com
或者，或者，使用 NuGet：Install-Package Microsoft.AspNet.Web.Optimization
当心 CssRewriteUrlTransform 的问题，例如数据 url 和虚拟目录，并考虑使用 CssRewriteUrlTransformFixed.cs。