css – MVC4软件包 – 没有Twitter的Bootstrap图标

在调试模式下运行我的MVC4应用程序(所以没有css /脚本的细化)工作正常。一旦我运行没有调试(css /脚本最小化)，我的Twitter Bootstrap图标不显示。这里的另一个线程建议使用bundles.IgnoreList.Clear()。但这似乎并不适用于我。我的BundleConfig.RegisterBundles(…)看起来像这样：

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.IgnoreList.Clear();

    // Some JavaScript bundles only
    // ...

    bundles.Add(new StyleBundle("~/bundles/maincss").Include(
        "~/Content/bootstrap.css","~/Content/bootstrap-responsive.css","~/Content/my.css"));
    }
}

所有软件包都使用Nuget进行安装(正如我所说，它在调试模式下工作正常)。我的内容文件夹还包含引导程序… css文件的最小化版本，但不包含my.css的最小化版本。字形图标位于图像子文件夹中。

我的_Layout.cshtml看起来像这样：

<head>
    ...
    @Styles.Render("~/bundles/maincss")
</head>

我应该通过“非调试”模式添加，我的意思是在Web.config 文件中设置debug =“false”选项：

<compilation debug="false" targetFramework="4.5" />

有没有人有任何想法为什么twitter引导图标不显示在“非调试”模式？

谢谢
抢

解决方法

我在移动，所以我的歉意简短的回应，但我会稍后更新。

Read this

长篇小说与捆绑后相对路径被弄脏有关。但好消息是最新的捆绑库解决了它。

更新

为了填补空白，基本上发生了什么事情是CSS文件具有资源的相对路径(在这种情况下是一个图标精灵)。在调试模式下，文件分别输出到页面，以便保留引用(/Content/bootstrap.css引用images / glyphicons-halflings.png(使完整路径/ Content / images / glyphicons-halflings)。 png)但是，当调试被删除时，文件是捆绑的，并且路径现在相对于你给你的捆绑包的任何虚拟路径。在上面的情况下，你现在来自/ bundles / maincss，这使得错误/捆绑/ maincss / images / glyphicons-halflings.png路径。

好消息是，这是一个 resolved bug和Microsoft.AspNet.Web.Optimization v1.1.0，现在有CssRewriteUrlTransform将替换所有的相对路径(在CSS文件内)与他们的绝对对照。这意味着无论您所谓的捆绑包，资源仍将被解决。

所以，要解决这个问题，你可以简单地做以下几件事：

IItemTransform cssFixer = new CssRewriteUrlTransform();

bundles.Add(
    new StyleBundle("~/bundles/maincss")
        .Include("~/Content/bootstrap.css",cssFixer)
        .Include("~/Content/bootstrap-responsive.css",cssFixer)
        .Include("~/Content/my.css",cssFixer)
);

我唯一的质量是当你想要多个文件时看起来很丑，所以要解决这个问题，你可以用扩展方法来简化它：

/// <summary>
/// Includes the specified <paramref name="virtualPaths"/> within the bundle and attached the
/// <see cref="System.Web.Optimization.CssRewriteUrlTransform"/> item transformer to each item
/// automatically.
/// </summary>
/// <param name="bundle">The bundle.</param>
/// <param name="virtualPaths">The virtual paths.</param>
/// <returns>Bundle.</returns>
/// <exception cref="System.ArgumentException">Only available to StyleBundle;bundle</exception>
/// <exception cref="System.ArgumentNullException">virtualPaths;Cannot be null or empty</exception>
public static Bundle IncludeWithCssRewriteTransform(this Bundle bundle,params String[] virtualPaths)
{
    if (!(bundle is StyleBundle))
    {
        throw new ArgumentException("Only available to StyleBundle","bundle");
    }
    if (virtualPaths == null || virtualPaths.Length == 0)
    {
        throw new ArgumentNullException("virtualPaths","Cannot be null or empty");
    }
    IItemTransform itemTransform = new CssRewriteUrlTransform();
    foreach (String virtualPath in virtualPaths)
    {
        if (!String.IsNullOrWhiteSpace(virtualPath))
        {
            bundle.Include(virtualPath,itemTransform);
        }
    }
    return bundle;
}

这使得上面的代码更清洁一些。 (可以说，我选择了一个很长的方法名称，但是我喜欢保持方法名称清楚的目的)

bundles.Add(
    new StyleBundle("~/bundles/maincss").IncludeWithCssRewriteTransform(
        "~/Content/bootstrap.css","~/Content/my.css"
    )
);

css – MVC4软件包 – 没有Twitter的Bootstrap图标

解决方法

相关文章