dotless auf Azure Web Project versteht nicht &: extend

Question

Ich benutze Azure SDK 2.2 und erstellt ein brandneues MVC 5 Web-Projekt. Ich habe dotless, bootstrap-less (und anschließend auf den neuesten LESS von getbootstrap.com aktualisiert) und font-awesome hinzugefügt. Ich bin auf den neuesten Stand gebracht und habe das Problem behoben, bei dem meine Datei web.config einen Abschnitt ohne Punkte hinzugefügt hat und das Projekt einen 500-internen Serverfehler zurückgegeben hat. Diese Konfiguration wurde gemäß dem Fehler verschoben.

Jetzt wird die Seite geladen, aber es gibt ein Problem mit der Bootstrap-Kompilierung von weniger zu CSS. Hier ist, was ich sehe, wenn ich in die bootstrap.less Datei gehen:

Expected '}' but found ':' on line 643 in file 'mixins.less': 
[642]: padding-right: (@grid-gutter-width/2); 
[643]: &:extend(.clearfix all); 
     --^ 
[644]: } 

Dies ist, was meine BundleConfig.cs Datei sagt:

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap/bootstrap.less", 
    "~/Content/css/font-awesome.css", 
    "~/Content/site.css")); 

Font-Ehrfürchtig zeigt sich fein zusammen mit der CSS , aber sie verwenden nicht weniger. Der LESS-Code stammt direkt aus der Bootstrap 3.1.1-Quelle aus http://getbootstrap.com, also glaube ich nicht, dass das das Problem ist.

Ich habe auch versucht die Bootstrap in sein eigenes Bündel zu trennen:

bundles.Add(new StyleBundle("~/bundles/bootstrap").Include(
    "~/Content/bootstrap/bootstrap.less")); 

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/css/font-awesome.css", 
        "~/Content/site.css")); 

das Bündel Trennung der gleichen Ausnahme wirft oben gesehen und gibt diese Fehlermeldung in der Debug-Konsole:

Critical error was detected at line 2, column 10 in http://127.0.0.1/Content/bootstrap/bootstrap.less. SCRIPT1004: Expected ';' 

Diese Zeile ist einfach ein Import in die Datei bootstrap.less.

Irgendwelche Vorschläge, wo Sie sonst noch hinsehen können?

Answer 1

Der dotless less Compiler ist veraltet, daher kann der neueste 3.1.x Bootstrap nicht kompiliert werden. Sie können entweder Bootstrap 3.0.x verwenden oder den 3.1.1-Code ändern, um die neue &:extend()-Syntax zu entfernen. Hier

ist ein Beispiel dafür, was &:extend() tun soll:

.classA { 
    color: #000; 
} 

.classB { 
    &:extend(.classA); 
    font-weight: bold; 
} 

In diesem Beispiel werden die Eigenschaften von classA hinzugefügt werden classB durch Zugabe des .classB Wähler auf classA der Erklärung, die Ergebnisse im folgenden css:

.classA, .classB { 
    color: #000; 
} 

.classB { 
    font-weight: bold; 
} 

So könnten Sie erreichen e so ziemlich die gleiche Wirkung ohne &:extend() unter Verwendung Mixins mit:

.classA { 
    color: #000; 
} 

.classB { 
    .classA; 
    font-weight: bold; 
} 

die gibt:

.classA { 
    color: #000; 
} 

.classB { 
    color: #000; 
    font-weight: bold; 
} 

So überall &:extend() in Bootstrap-3.1.1 (ich glaube, es gibt rund 17 Plätze) verwendet wird, ersetzen &:extend(.className); oder &:extend(.className all); mit .className;, und nur so nahe wie möglich an das Verhalten von &:extend(), Platz .className; an der Spitze des Blocks. Dies liegt daran, dass &:extend() die Eigenschaften vor dem aktuellen Block hinzufügt, sodass das Mixin vor dem Rest der Eigenschaften im Block stehen sollte.

Für den Fehler, den Sie zur Verfügung gestellt haben, &:extend(.clearfix all); wird .clearfix; und wird an der Spitze dieses Blocks platziert.

In den Versionshinweisen für bootstrap 3.1 erwähnen sie, dass sie &:extend(.clearfix all); speziell hinzugefügt, um den doppelten css-Code zu entfernen, der .clearfix mixin hinzugefügt wurde.

Edit:

Auch wenn Ihre bootstrap.less Datei Bündeln Sie StyleBundle verwenden, die in der Entwicklung feiner werden, wenn Sie debug="true" in Ihrem Web-Config haben, weil es nicht die Bündelung nicht tun, aber StyleBundle won‘ t wissen, um die weniger Datei in CSS zu kompilieren, wenn es das Bundle in der Produktion erstellt (debug="false").

Sie müssen das Paket System.Web.Optimization.Less nuget installieren und stattdessen LessBundle verwenden.

Answer 2

wurde dieses Problem protokolliert und https://github.com/dotless/dotless/issues/355

aktiv gearbeitet wird

eine Abhilfe gibt auch alle Anrufe & ersetzen ist: extend (.clearfix alle); mit .clearfix();

oder einfach gehen zurück bis 3,0