Łączenie ASP.NET MVC4 z serwerem Twitter Bootstrap

Question

Próbuję użyć nowej funkcji pakowania w MVC 4 z bootstrapem na Twitterze i wydaje mi się, że to ścieżki do plików gngficons png, które są pomieszane w jakiś sposób . Oto mój kod:

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

Nie widzę żadnych ikon na przyciskach i podobnie. Czy robię coś złego tutaj? Jakieś sugestie?

Answer 1

Najprawdopodobniej problem polega na tym, że ikony/obrazy w plikach css używają względnych ścieżek, więc jeśli twój pakiet nie znajduje się na tej samej ścieżce względnej co pliki z uwolnionym css, stają się niedziałającymi łączami.

Mamy podścielanie adresów URL w css na naszej liście rzeczy do zrobienia, ale do tej pory, easist rzeczą do zrobienia jest, aby mieć swoją drogę wiązki wyglądać katalogu css więc względne adresy URL tylko praca, to znaczy:

new StyleBundle("~/Static/Css/bootstrap/bundle") 

Aktualizacja: Dodaliśmy obsługę tego w wersji 1.1beta1, więc aby automatycznie przepisać adresy URL obrazów, możesz dodać nowy ItemTransform, który automatycznie to odsyła.

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

Co można zrobić, to można przejść do Customize page i zmienić @iconSpritePath i @iconWhiteSpritePath w Sprites sekcji oraz, oczywiście, należy pobrać nowy styl.

Włożyłam moje obrazy w folderze Folder Content/Images i zmieniłem ścieżkę w:

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

Innym rozwiązaniem jest, aby pobrać wszystkie pliki z mniej od github, zmień te same zmienne w pliku variables.less i ponownie skompiluj bootrap.less plik z narzędziem takim jak SimpLESS.

Answer 3

do „CssRewriteUrlTransform” działa dobrze dla aplikacji, które nie działa na szczycie katalogu wirtualnego.

Tak więc, jeśli aplikacja działa na http://your-site.com/ to działa dobrze, ale jeśli działa na http://your-site.com/your-app/ będziesz miał 404 dla wszystkich obrazów, ponieważ domyślna „CssFixRewriteUrlTransform” odwołuje swoje obrazy z „/”.

Aby rozwiązać ten problem, I wprowadziły własną wersję 'CssRewriteUrlTransform' tak:

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

UPDATE: dzięki superjos który wskazał, że był kolejnym rozwiązaniem tam:

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

Answer 4

Naprawiono to teraz dodany do mojego pakietu AspNetBundling NuGet, który rozwiązuje kilka innych problemów w standardowym transformatorze, w szczególności wokół danych-uris. Open-source na GitHub też.

Wystarczy zrobić:

1. Install-Package AspNetBundling
2. Wymień CssRewriteUrlTransform z CssRewriteUrlTransformFixed