当捆绑 EnableOptimizations 为 true 时，Font-Awesome 获取请求失败答案

【问题标题】：Font-Awesome Get Request Failure When Bundling EnableOptimizations is true当捆绑 EnableOptimizations 为 true 时，Font-Awesome 获取请求失败
【发布时间】：2014-09-17 00:10:19
【问题描述】：

我在使用 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 在这篇文章的 cmets 中的建议，我从 stackoverflow answer 实现了以下代码，它已解决了我的开发机器上的问题：

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

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

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

谢谢。

【问题讨论】：

你也有缩小版 (font-awesome.min.css)？
@StephenMuecke 是的。有一个缩小版。我相信 font-awesome css 使用的是相对路径，这就是问题所在。让我想知道为什么这在我使用 Nuget 安装时不常见。
这很可能是缩小文件的问题。尝试删除它，然后让捆绑器对标准文件进行压缩。
@StephenMuecke 我刚刚尝试了你的建议，唉，它并没有解决问题。
使用CssRewriteUrlTransform 有帮助吗？我不知何故记得这是一个可能的解决方案？例如bundles.Add(new StyleBundle("~/Content/mycss").Include("~/Content/font-awesome.css", new CssRewriteUrlTransform()));

标签： asp.net-mvc font-awesome bundling-and-minification

【解决方案1】：

使用CssRewriteUrlTransform。

将网址重写为绝对网址，以便在捆绑后仍能找到资产。

例子：

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

【讨论】：

【解决方案2】：

This SO post 对此问题有一个有用的解决方案，而且它似乎是由实际为 Microsoft 工作的人编写的 ASP.net Bundle 代码。

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

我们的待办事项列表中的 css 中的 url 变基，但现在，最简单的要做的就是让你的包路径看起来像 css 目录，所以相对网址可以正常工作，即：

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

更新：我们在 1.1beta1 版本中添加了对此的支持，因此自动重写图片url，可以添加新的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()));

【讨论】：

【解决方案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"));

【讨论】：