Question

在调试模式下运行我的MVC4应用程序（因此没有缩小css / scripts）可以正常工作。一旦我在没有调试的情况下运行（css / scripts minified），我的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安装的（正如我所说，它在调试模式下工作正常）。我的内容文件夹还包含bootstrap ... css文件的缩小版本，但不包含my.css的缩小版本。字形图标位于图像子文件夹中。

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

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

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

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

有没有人知道为什么twitter引导图标不会以“非调试”模式显示？

由于罗布

Answer 1

我在移动设备上，所以我为简短的回复道歉，但我稍后会更新。

Read this

长话短说，它与捆绑后相对路径被污染有关。但好消息是最新的捆绑库解决了它。

更新

要填补空白，基本上发生的事情是CSS文件具有相对的资源路径（在本例中是一个图标精灵）。在调试模式下，文件将单独输出到页面，以便保留引用（/Content/bootstrap.css并引用images/glyphicons-halflings.png（生成完整路径/Content/images/glyphicons-halflings.png）。但是，当调试时删除文件是捆绑的，路径现在相对于你给你的包的任何虚拟路径。在上面的情况下，你现在来自/bundles/maincss，这导致错误的/bundles/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/bootstrap-responsive.css",
        "~/Content/my.css"
    )
);

Answer 2

我使用Bootstrap 3.0遇到了同样的事情。 @brad-christie's answer解决了我的问题，直到我使用NuGet升级到Microsoft ASP.Net Web优化框架1.1.1。这似乎阻止了CssRewriteUrlTransform修复工作。我通过删除对CssRewriteUrlTransform的引用并创建样式表 bootstrap-bundle-font-fix.css 来解决了这个问题，其中只包含以下内容：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../../Content/fonts/glyphicons-halflings-regular.eot');
  src: url('../../Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       url('../../Content/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('../../Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
       url('../../Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

然后将其包含在我的bootstrap css包中：

bundles.Add(new StyleBundle("~/bundles/Content/bootstrap")
    .Include("~/Content/bootstrap/bootstrap.css")
    .Include("~/Content/bootstrap/bootstrap-theme.css")
    .Include("~/Content/bootstrap-bundle-font-fix.css")
    .Include("~/Content/sticky-footer-navbar.css"));

MVC4 Bundles - 没有Twitter Bootstrap图标

2 个答案:

更新