ASP.NET MVC4 в комплекте с Twitter Bootstrap

Question

Я пытаюсь использовать новую функцию связывания в MVC 4 с загрузкой Twitter, и мне кажется, что пути к png-файлам глифов в int css каким-то образом перепутаны. Вот мой код:

 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"));


        bundles.Add(new ScriptBundle("~/bundles/publicjs").Include(
            "~/Static/Js/jquery-1.7.2.js",
            "~/Static/Js/bootstrap/bootstrap.js",
            "~/Static/Js/cookie/jquery.cookie.js"));

Я не вижу никаких значков на кнопках и аналогично. Я что-то здесь не так делаю? Какие-либо предложения?

Answer 1

Скорее всего, проблема заключается в том, что значки / изображения в файлах css используют относительные пути, поэтому, если ваш пакет не находится в том же относительном пути приложения, что и ваши разделенные файлы css, они становятся неработающими ссылками.

В нашем списке задач мы перебазируем URL-адреса в css, но на данный момент проще всего сделать так, чтобы путь к вашему пакету выглядел как каталог css, поэтому относительные URL-адреса просто работают, т.е.

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()));

Answer 2

CssRewriteUrlTransform отлично работает для приложений, которые не запускаются поверх виртуального каталога.

Итак, если ваше приложение работает на http://your-site.com/ оно работает просто отлично, но если работает на http://your-site.com/your-app/ вас будет 404 для всех ваших изображений, потому что по умолчанию "CssFixRewriteUrlTransform" ссылается на ваши изображения с помощью "/".

Чтобы решить эту проблему, я реализовал свою собственную версию CssRewriteUrlTransform, например:

    public class CssFixRewriteUrlTransform : IItemTransform {
    private static string ConvertUrlsToAbsolute(string baseUrl, string content) {
        if (string.IsNullOrWhiteSpace(content)) {
            return content;
        }
        var regex = new Regex("url\\(['\"]?(?<url>[^)]+?)['\"]?\\)");
        return regex.Replace(content, match => string.Concat("url(", RebaseUrlToAbsolute(baseUrl, match.Groups["url"].Value), ")"));
    }

    public string Process(string includedVirtualPath, string input) {
        if (includedVirtualPath == null) {
            throw new ArgumentNullException("includedVirtualPath");
        }
        var directory = VirtualPathUtility.GetDirectory(includedVirtualPath);
        return ConvertUrlsToAbsolute(directory, input);
    }

    private static string RebaseUrlToAbsolute(string baseUrl, string url) {
        if (string.IsNullOrWhiteSpace(url) || string.IsNullOrWhiteSpace(baseUrl) || url.StartsWith("/", StringComparison.OrdinalIgnoreCase)) {
            return url;
        }
        if (!baseUrl.EndsWith("/", StringComparison.OrdinalIgnoreCase)) {
            baseUrl = string.Concat(baseUrl, "/");
        }
        return VirtualPathUtility.ToAbsolute(string.Concat(baseUrl, url));
    }
}

ОБНОВЛЕНИЕ: спасибо superjos, которые указали, что было другое решение там:

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

Answer 3

Что вы можете сделать, это вы можете перейти на страницу настройки и изменить @iconSpritePath а также @iconWhiteSpritePath в разделе Sprites и, конечно же, скачать новый стиль.

Я положил свои изображения в папку Content/Images папку, и я изменил путь в:

• /Content/Images/glyphicons-halflings.png
• /Content/Images/glyphicons-halflings-white.png

Другой альтернативой является загрузка всех файлов LESS из github, изменение тех же переменных в файле variables.less и повторная компиляция файла bootrap.less с помощью такого инструмента, как SimpLESS.

Answer 4

Исправление для этого теперь добавлено в мой пакет AspNetBundling NuGet, который решает кучу других проблем в стандартном преобразователе, особенно вокруг использования data-uris. С открытым исходным кодом на GitHub тоже.

Просто делать:

1. Install-Package AspNetBundling
2. замещать CssRewriteUrlTransform с CssRewriteUrlTransformFixed