【问题标题】:MVC4 Bundles - No Twitter Bootstrap iconsMVC4 Bundles - 没有 Twitter Bootstrap 图标
【发布时间】:2013-07-27 09:52:08
【问题描述】:

在调试模式下运行我的 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 安装的(正如我所说,它在调试模式下运行良好)。我的内容文件夹还包含两个 bootstrap...css 文件的缩小版本,但不包含 my.css 的缩小版本。字形图标位于 images 子文件夹中。

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

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

我应该补充一点,“非调试”模式是指在 Web.config 文件中设置 debug="false" 选项:

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

有谁知道为什么 twitter 引导图标在 “非调试” 模式下不显示?

谢谢 抢

【问题讨论】:

  • 这个问题也适用于 Font-Awesome。

标签: css asp.net-mvc-4 twitter-bootstrap bundling-and-minification


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

【讨论】:

  • 感谢您提供的链接,它帮助我解决了我的问题。我将代码更改如下: bundles.Add(new StyleBundle("~/Content/maincss").Include("~/Content/bootstrap.css", "~/Content/bootstrap-responsive.css", "~/内容/my.css"));并且还删除了 IgnoreList.Clear()。现在可以正常使用了。
  • @RobL:无需更改包名,只需使用CssRewriteUrlTransform。现在我已经更新了我的答案,因为我在一台键盘更好的笔记本电脑上。 ;-)
  • @BradChristie 为恢复旧线程和我缺乏这方面的知识而道歉。您选择扩展 Bundle 然后验证它是 StyleBundle 类型而不是仅仅扩展类 StyleBundle 是否有特定的原因?
  • @colin:使其与现有的.Include 方法一起流畅地工作。否则它只有在单独使用时才有效。
  • 感谢您的澄清。
【解决方案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');
}

然后将它包含在我的引导 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"));

【讨论】:

  • 我看到了类似的问题。我从 NuGet 获得了 Microsoft.AspNet.Web.Optimization 1.1.3,它似乎没有转换相对图像路径。这是怎么回事?有人破坏了 CssRewriteUrlTransform 吗?
  • 成功!我错过了两件事。 1)如果 *.min.css 存在,捆绑使用它而不转换任何包含的 url。 2)一旦我删除 *.min.css 文件,它正在转换,但由于虚拟文件夹而弄乱了路径。通过以下问题解决:stackoverflow.com/questions/19765238/…
  • 感谢 Michael 的解决方案,我遇到了同样的事情
猜你喜欢
  • 2013-01-30
  • 2012-09-16
  • 1970-01-01
  • 1970-01-01
  • 2014-09-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多