在 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

您可以在包含 bundle 时使用 CssRewriteUrlTransform:

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

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