在visual studio中捆绑时，CSS相对URL不起作用

Question

在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？

Answer 1

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

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

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