@marceloverdijk Ich wäre gespannt, was Sie über # 331 denken und wie Pfade beim Importieren von Stylesheets angepasst werden sollten.

Die Regel ist einfach: Importieren Sie nur Dateien, die mit .less enden oder keine Erweiterung haben, der Rest bleibt dem Browser überlassen. So bleiben <strong i="6">@import</strong> "foo.css" unberührt, <strong i="8">@import</strong> "foo" und <strong i="10">@import</strong> "foo.less" werden analysiert und die Dateien importiert.

OK, die Regel ist klar. Vielen Dank.

Aber haben Sie eine Idee, warum der Google Font-Import dann tatsächlich importiert wird?
Der einzige Unterschied ist, dass ich Env.js und Rhino anstelle eines echten Browsers verwende.

Verwendet die weniger Logik möglicherweise etwas, um zu bestimmen, ob es importiert werden soll oder nicht, was von Env.js nicht (oder falsch) verstanden wird?

Jede Hilfe geschätzt.

Beachten Sie, dass ich dies verwende, um das WENIGER zu kompilieren:

var Ergebnis; var p = new less.Parser (); p.parse (Eingabe, Funktion (e, Baum) {result = tree.toCSS ();});

1 Frage zur Regel. Sind Zitate wichtig?

Ich habe dies in der import.js weniger Quelle bemerkt:

    if (path instanceof tree.Quoted) {
        this.path = /\.(le?|c)ss$/.test(path.content) ? path.content : path.content + '.less';
    } else {
        this.path = path.value.content || path.value;
    }

Die Problemumgehung, die ich verwende, besteht darin, &.css an die Schriftart-URL anzuhängen, um den WENIGER Parser dazu zu bringen, ihn wie einen normalen CSS-Import zu behandeln. Wie so:

<strong i="7">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans&.css);

Übrigens finde ich es sehr bedauerlich, dass die ursprünglichen Designer von LESS keine separate @include -Richtlinie verwendet haben, anstatt die armen alten @import ...

Ich denke, es sollte ohne das funktionieren, wie im Test https://github.com/cloudhead/less.js/blob/master/test/less/import.less vorgeschlagen

was beinhaltet

<strong i="8">@import</strong> url("import/import-test-a.less");
//<strong i="9">@import</strong> url("import/import-test-a.less");
<strong i="10">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);

#import-test {
  .mixin;
  width: 10px;
  height: <strong i="11">@a</strong> + 10%;
}

und erwartet

<strong i="15">@import</strong> "import-test-d.css";

<strong i="16">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);
#import {
  color: red;
}
.mixin {
  height: 10px;
  color: red;
}
#import-test {
  height: 10px;
  color: red;
  width: 10px;
  height: 30%;
}

welches den Google Fonts Import noch enthält.
Ich habe diese nicht selbst getestet, gehe aber davon aus, dass sie erfolgreich sind.

PS: Dieser Google Fonts-Import ist der einzige Teil, der in meiner Open Source-Bibliothek lesscss4j nicht übergeben wird.
Alle anderen Kompatibilitätstests bestehen jetzt.

Daher bin ich sehr gespannt darauf, dieses letzte Problem zu lösen, bevor ich es veröffentliche. Hoffe jemand kann helfen.

Vielen Dank an maranomynet für die großartige Problemumgehung für Google Web Fonts in LESS (ich hatte Probleme bei der Verwendung von @import in LESS Release 1.1.3). Ich bin damit einverstanden, dass WENIGER diesen Teil der Syntax auf unglückliche Weise behandelt hat.

Ich wurde jetzt noch verwirrter.

Ich habe ein einfaches Webprojekt erstellt und den folgenden Code zum Kopfbereich hinzugefügt:

<link rel="stylesheet/less" type="text/css" href="/less/google.less">
<link rel="stylesheet/less" type="text/css" href="/bootstrap/bootstrap.less">
<script src="/js/less-1.1.4.js" type="text/javascript"></script>

Die Kompilierung von Twitter Bootstrap funktioniert, google.less jedoch nicht.
Diese google.less enthält nur die folgende Zeile, die aus dem WENIGER-Kompatibilitätstest import.less kopiert wurde

<strong i="11">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);

Der Fehler, den ich im Browser erhalte, ist:

Http: // localhost : 8888 / less / http://fonts.googleapis.com/css?family=Open+Sans (404) konnte nicht geladen werden.
http: // localhost : 8888 / less / google.less

Jetzt wundere ich mich wirklich über den Kompatibilitätstest import.less ....

Fügen Sie & .css hinzu, bevor Sie den URL-Import schließen

von
@ import url (http://fonts.googleapis.com/css?family=Open+Sans);

zu
@ import url (http://fonts.googleapis.com/css?family=Open+Sans&css);

Ich hatte ein ähnliches Problem, falls dies jemandem hilft: Ich habe versucht, mehrere Google-Schriftarten zu importieren, die durch '|' getrennt sind:
@import url (http://fonts.googleapis.com/css?family=Inconsolata|Cantarell|Architects|Daughter&.css);
was einen Fehler "fehlendes Schließen) für url () geben würde"

Der Fehler wurde behoben, indem die URL in Anführungszeichen gesetzt wurde (Hinweis: Die & .css muss noch am Ende sein, andernfalls ist der 404-Importfehler aufgetreten). Alle Schriftarten wurden auch erfolgreich geladen:
@import url ("http://fonts.googleapis.com/css?family=Ubuntu+Mono|Cantarell|Architects|Daughter&.css");

gute tipps enoex: D danke !!!!

Ähm, es ist schwer zu erkennen, warum dieses Problem geschlossen wurde. Die Nutzer haben einen unglaublich zwielichtigen Hack gefunden, der brechen könnte, wenn Google beschließt, & .css; Dies muss in lessc behoben werden. Es sollte eine Methode geben , um zu erzwingen, dass ein

Genau. irgendwelche Vorschläge?

<strong i="6">@import</strong> css url(...);

ist eine Möglichkeit. Außerdem können Sie den Import von Less mit einer CSS-Erweiterung erzwingen.

Diese Syntax sieht gut aus (ich bin nicht derjenige, der den Parser schreibt, daher weiß ich nicht, wie gut er passt).

Meine einzige Sorge sind andere less Compiler. Der Code, mit dem ich Probleme hatte, funktionierte gut für die Entwickler, die ihn geschrieben haben, wahrscheinlich weil ihr weniger Compiler nicht einmal die Kompilierungszeit @import übernimmt. Selbst wenn dies in lessc behoben wäre, würde ich wahrscheinlich weiterhin den "& .css" -Hack verwenden. Daran können Sie jedoch nichts ändern.

Hat jemand eine Lösung gefunden?

Ich habe festgestellt, dass das Anhängen von "& .css" und das Umschließen der URL in Anführungszeichen nur die Kompilierungsprobleme löst - die von mir angegebenen Schriftarten werden immer noch nicht gerendert ....

wieder geöffnet, wie es sich anhört, ist es immer noch ein Problem - richtig?

Eine einfache Lösung wäre, nichts an die URL anzuhängen, wenn sie Parameter enthält (z. B.? family = x).

@ntoft Ich kann den Fehler nicht mehr reproduzieren .. mit lessc .. was genau ist das verbleibende Problem?

Vielen Dank für das Follow-up.

Ich verwende den "append & .css" -Ansatz und er funktioniert jetzt (Teil Benutzerfehler: - /) War einfach neugierig, ob es eine bessere Methode gibt. Es scheint jedoch zu funktionieren, also zögern Sie nicht, es zu schließen.

Vielen Dank.

Es wäre schön, wenn es ohne den Ansatz zum Anhängen von .css funktionieren würde. Haben Sie also ein Beispiel dafür?

Ich glaube, ich habe es falsch verstanden ... das Problem ist, dass das CSS importiert wird, wenn Sie nicht möchten, dass es importiert wird.

Vielleicht sollte in 1.4.0 @import in Ruhe gelassen werden und @include sollte immer enthalten sein

Verschieben der Diskussion auf eine einzelne Ausgabe # 1185

Nur um Zeichen wie diesen zu entkommen, @import url (https \: \ / \ / fonts.googleapis.com \ / css? Family = Orbitron & .css);

@ jas-naz Der richtige und besser lesbare Weg ist:

<strong i="6">@import</strong> (css) url(https://fonts.googleapis.com/css?family=Orbitron);

Weitere Informationen finden Sie unter http://lesscss.org/features/#import -atrules-feature-import-options.

Hallo, ein weiterer Hack, um dies zu erreichen, ist das Hinzufügen von "#css" am Ende der URL, wie folgt:

<strong i="6">@import</strong> url('https://fonts.googleapis.com/css?family=Paytone+One#css');

@ TyrionGraphiste

Schlechte Idee. In neueren Versionen verarbeitet Less diese Datei tatsächlich (anstatt den Import unverändert zu lassen).
Deshalb ist (css) davor obligatorisch. (In früheren Versionen war es nur das falsche Verhalten, bei dem der Compiler durch "eine" css Zeichenfolge in der URL anstelle der in diesem speziellen Fall fehlenden richtigen Erweiterung entschieden hat).