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 answer实现了以下代码，它修复了我的开发机器上的问题：

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()));

Answer 2

This SO post有一个很有用的解决方案来解决这个问题，它似乎是由一个在ASP.net Bundle代码上真正为Microsoft工作的人编写的。

  

问题很可能是css文件中的图标/图像   使用相对路径，因此如果您的捆绑包不在同一个应用程序中   相对路径作为非捆绑的css文件，它们会成为断开的链接。

     

我们在待办事项列表中使用css重新定位网址，但就目前来说，这是一个简单的方法   要做的是让你的包路径看起来像css目录   相对网址正常工作，即：

new StyleBundle("~/Static/Css/bootstrap/bundle")

  

更新：我们在1.1beta1版本中添加了对此的支持，所以   自动重写图片网址，可以添加新的ItemTransform   这会自动进行这种改变。

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));

这解决了我在生产服务器上的Font Awesome图标上获取404错误的问题，原因是相对路径未正确使用。

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

Answer 3

在Sytem.Web.Optimization命名空间中有一个名为CssRewriteUrlTransform的知识类，可以帮助我们解决这个问题，或者任何引用url相关资源的css文件。新代码现在看起来像：

bundles.Add(new StyleBundle("~/content/smartadmin")
            .Include("~/content/css/font-awesome.css", new CssRewriteUrlTransform())
            .Include("~/content/css/dataTables.responsive.css")
            .IncludeDirectory("~/content/css", "*.min.css"));