ASP.NET MVC4 Bundling mit Twitter Bootstrap

Question

Ich versuche, die neue Bündelung Funktion in MVC 4 mit Twitter Bootstrap zu verwenden und es scheint mir, wie die Pfade zu den Glyphicons Png-Dateien int der CSS in irgendeiner Weise durcheinander gebracht werden . Heres mein Code:

Ich sehe keine Symbole auf Tasten und ebenso. Mache ich hier etwas falsch? Irgendwelche Vorschläge?

Answer 1

Das Problem ist höchstwahrscheinlich, dass die Symbole/Bilder in den CSS-Dateien relative Pfade verwenden. Wenn Ihr Bundle nicht im selben relativen App-Pfad wie Ihre entbündelten CSS-Dateien lebt, werden sie zu fehlerhaften Links.

Wir haben Rebasieren Urls in CSS auf unserer To-do-Liste, aber für jetzt, das easist was zu tun ist dein Bündel Pfad wie das CSS-Verzeichnis suchen hat, so dass die relative URLs nur funktionieren, das heißt:

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

Update: Wir haben in der Version 1.1beta1 Unterstützung dafür hinzugefügt. Um die Bild-URLs automatisch neu zu schreiben, können Sie eine neue ItemTransform hinzufügen, die diese Umbasierung automatisch durchführt.

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

Was Sie tun können, ist, dass Sie page zu den besonders anfertigen gehen und @iconSpritePath und @iconWhiteSpritePath in den Sprites Abschnitt und natürlich ändern, laden Sie den neuen Stil.

Ich habe meine Bilder im Ordner Content/Images Ordner abgelegt und ich habe den Weg in geändert:

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

Eine weitere Alternative ist zum Download alle LESS-Dateien von github, ändern Sie die gleichen Variablen in der Variablen.less Datei und kompilieren Sie die boatrap.less Datei mit einem Werkzeug wie SimpLESS.

Answer 3

Die ‚CssRewriteUrlTransform‘ funktioniert gut für Anwendungen, die auf einem virtuellen Verzeichnis nicht ausgeführt.

Also, wenn Sie Ihre App auf http://your-site.com/ läuft läuft es ganz gut, aber wenn läuft auf http://your-site.com/your-app/ werden Sie 404 für alle Ihre Bilder haben, weil die Standard ‚CssFixRewriteUrlTransform‘ wird Ihre Bilder mit einem ‚/‘ verweist.

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:

Um dieses Problem zu lösen, ich habe meine eigene Version von 'CssRewriteUrlTransform' wie dies umgesetzt dank superjos wer das zeigte eine andere Lösung gibt, war:

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

Answer 4

Fix für dieses nun hinzugefügt zu meinem AspNetBundling NuGet-Paket, das eine Reihe von anderen Problemen in der Standard-Transformator löst, insbesondere um Daten-uris verwenden. Open-Source auf GitHub auch.

Just do:

1. Install-Package AspNetBundling
2. CssRewriteUrlTransform Ersetzen mit CssRewriteUrlTransformFixed