MVC4 Bundles - нет иконки Twitter для загрузки

Запуск моего приложения MVC4 в режиме отладки (так что никакая минификация css/scripts) не работает. Как только я запускаю без отладки (css/scripts minified), мои иконки Twitter-загрузки не отображаются. Другой поток здесь предложил использовать 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. Значки глифов находятся в подпапке изображений.

My _Layout.cshtml выглядит так:

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

Я должен добавить, что в режиме "non-debug" я имею в виду установку опции debug = "false" в файле Web.config:

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

Кто-нибудь может понять, почему значки бутстрапа Twitter не отображаются в режиме "без отладки" ?

Спасибо Rob

Ответ 1

Я нахожусь на мобильном телефоне, поэтому извиняюсь за краткий ответ, но позже я обновлю.

Прочтите это

Короче говоря, это связано с тем, что относительный путь загрязняется после связывания. Но хорошая новость - это последняя библиотека пакетов.

Update

Чтобы заполнить пробелы, по существу, происходит то, что файлы CSS имеют относительные пути к ресурсам (в данном случае - спрайт значка). Когда в режиме отладки файлы выводятся отдельно на страницу, поэтому ссылки сохраняются (/Content/bootstrap.css со ссылкой на images/glyphicons-halflings.png (создание полного пути /Content/images/glyphicons-halflings.png). Однако при отладке удаляются файлы в комплекте и путь теперь относительно любого виртуального пути, который вы дали вашему набору. В случае выше вы теперь исходите из /bundles/maincss, который создает ошибочный путь /bundles/maincss/images/glyphicons-halflings.png.

Хорошей новостью является то, что это была ошибка , а с 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"
    )
);

Ответ 2

Я столкнулся с тем же, используя Bootstrap 3.0. @brad-christie answer решил мою проблему, пока я не использовал NuGet для обновления до Microsoft ASP.Net Web Optimization Framework 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"));