在 Visual Studio 中捆绑时，CSS 相对 url 不起作用答案

【问题标题】：CSS relative urls do not work when bundling in visual studio在 Visual Studio 中捆绑时，CSS 相对 url 不起作用
【发布时间】：2014-12-22 12:21:23
【问题描述】：

在一个 css 文件中我有这个：

.social-icons li .facebook {
  background: url(../img/social/facebook.png) no-repeat;
}

与css文件相比，img目录确实在“../”中。

如果我在 _Layout.cshtml 中包含带有正常标记的 css，一切正常。

但如果我使用捆绑：

bundles.Add(new StyleBundle("~/bundles/core-styles").Include(
        "~/assets/global/frontend/css/components.css"));

它会破坏所有图像。

有没有什么方法可以使用捆绑并拥有正确的图像而无需接触 components.css？

【问题讨论】：

标签： css asp.net-mvc bundling-and-minification

【解决方案1】：

包含捆绑包时可以使用CssRewriteUrlTransform：

bundles.Add(new StyleBundle("~/bundles/core-styles")
    .Include("~/assets/global/frontend/css/components.css", new CssRewriteUrlTransform()));

该类将文件中的 URL 重写为绝对 URL，它将解决您的问题。

【讨论】：