使用 .net 进行捆绑和缩小会丢失 CSS 中的图像引用

Question

我意识到这个问题已经在网上被问到了，但我似乎无法找到关于如何解决这个问题的明确答案。

这就是我们捆绑的方式

// iPortal Specific 
bundles.Add(new StyleBundle("~/bundles/css/MyCSS")
            .Include("~/Content/css/MyCSS.css")
            .Include("~/Content/css/MyCSSMedia.css"));

然后在 _layouts 页面内：-

  @Styles.Render("~/bundles/css/MyCSS")

其中“~bundles/css/MyCSS”是一个虚拟目录，因为它在服务器上不存在。

我们的 CSS 结构是：-

Content
   CSS
      MyCSS.css
      _Images

MyCSS.css 引用“_images”文件夹中的图像的位置

我们尝试过使用

.Include("~/Content/css/MyCSS.css", new CssRewriteUrlTransform())

这没用。

也试过了

 public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
    }
}

再次，这没有用。

我们找到的唯一其他解决方案是更改虚拟目录以匹配物理目录，这感觉不太对，

我们错过了什么吗？

Answer 1

我认为当你在 html 中提取生成的 css 文件时，它看起来像这样：

包/css

图片在：

内容/图片

CSS 指向bundles/_Images，显然不存在。

我认为你有两个选择：

1. 将图像移至顶层，以便您的 CSS 可以指向那里（无论是否捆绑都可以）
2. 将CssRewriteUrlTransformWrapper中CSS中图片的路径替换为../Content/_Images