Bundling EnableOptimizations为true时,Font-Awesome获取请求失败

Question

我遇到了font-awesome和ASP.NET的优化/捆绑功能的问题.

当EnableOptimizations设置为false时,我用于加载图像的字体可以完美地工作:

但是,当EnableOptimizations设置为true时,将不再找到该字体,并显示以下内容:

我注意到GET请求所遇到的路径之间存在差异:

EnableOptimizations = false:localhost:3620/Content/fonts/fontawesome-webfont.woff？v = 4.1.0 EnableOptimizations = true:localhost:3620/fonts/fontawesome-webfont.svg？v = 4.1.0

有问题的包看起来像这样:

bundles.Add(new StyleBundle("~/Content/BootstrapAndFontAwesome").Include(
    "~/Content/bootstrap/bootstrapLabel.css",
    "~/Content/font-awesome/font-awesome.css"
    ));

这里发生了什么,解决它的最佳方法是什么？

干杯

更新

关于Rowan在这篇文章的评论中的建议,我从这个stackoverflow的答案中实现了以下代码,它解决了我的dev机器上的问题:

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

我需要做一些练习部署以确保它是可靠的(例如使用虚拟IIS目录等).到目前为止看起来不错

请注意,我确实必须将font-awesome文件分离到它自己的bundle中,因为在采用CssRewriteUrlTransform解决方案时它不能与其他资源捆绑在一起.

谢谢.

Answer 1

使用CssRewriteUrlTransform.

重写网址是绝对的,因此捆绑后仍然可以找到资产.

例:

bundles.Add(new StyleBundle("~/Content/mycss")
    .Include("~/Content/font-awesome.css", new CssRewriteUrlTransform()));