wake-up-neo.net

Variablennamenfehler "ist undefiniert", obwohl "variables.less" importiert wurde

Ich habe heute mit LESS angefangen. Aber es ist irgendwie komisch. Dieser Code funktioniert nicht. Ich bekomme einen Fehler:

! Variable Name Error: @linkColor in a is undefined.

Mein Bootstrap:

@import "variables.less";
@import "normalize.less";

variables.less:

@linkColor:             #08c;
@linkColorHover:        darken(@linkColor, 15%);

normalize.less:

a {
    color: @linkColor;
}
a:visited {
    color: @linkColor;
}
a:hover {
    color: @linkColorHover;
}

Wenn ich einen mache

@import "variables.less"

in der normalize.less-Datei funktioniert alles einwandfrei.

Danke für Ihre Hilfe :)

47
conradkdotcom

Diese andere Frage führte mich letztendlich zur richtigen Antwort.

Es scheint, als würde der LESS-Compiler unbemerkt ausfallen, wenn Dateien mit einer Stückliste codiert werden. (Das ist eine Byte-Auftragsmarkierung für Benutzer, die mit dem Begriff nicht vertraut sind.) Dies ist die Standardeinstellung in einigen Editoren, z. B. Visual Studio.

Der Compiler zeigt einen Fehler in der Stückliste an, wenn er sich in Ihrer Root-Datei befindet, aber scheinbar unbemerkt für @ imported-Dateien ausfällt.

Speichern Sie Ihre Dateien als UTF-8 ohne Stückliste, und prüfen Sie, ob das Ihr Problem löst.

31
Chris Jaynes

Möglicherweise gibt es eine andere mögliche Ursache.

Hier ist meine ursprüngliche Gruntfile.js:

less: {
      compile: {
        files: {
          'css/less.css': 'less/**/*.less'
        }
      }
    },

Der Platzhalter bewirkt, dass der LESS-Compiler alle .less-Dateien in diesem Ordner kompiliert und alle Ergebnisse in einem CSS zusammenführt. Und ich habe Fehler bei der Ausführung von grunt less:compile

NameError: .transition ist in less/core/html.less in Zeile 38, Spalte 3 undefiniert

Sobald ich 'less/**/*.less' in 'less/css.less' geändert habe, ist die Kompilierung erfolgreich. 

6
Evi Song

Dieser Fehler kann auch durch fehlerhafte Importe in den Dateien, die Sie importieren, auftreten.

Dieses Problem trat auch auf, wenn mehrere Importebenen verwendet wurden, und der Compiler 'lessc' aus Node.js:

  • Die Originaldatei importierte eine Datei (die wir als "Kind" bezeichnen)
  • Die untergeordnete Datei importierte eine Datei (die wir "Enkelkind" nennen).
  • Das Enkelkind wurde importiert

Ich habe versucht, die Originaldatei zu kompilieren, und erhielt dasselbe Verhalten der "undefinierten Variablen". Ich konnte sehen, dass die Variable im Kind definiert war und die Syntax richtig aussah.

Es wurden keine früheren Fehler angezeigt. 

Es stellte sich heraus, dass das Kind das Enkelkind nicht richtig importierte. Ie, 

@import grandchild.less

eher, als:

@import "grandchild.less";

Durch das Festlegen des Kinds beim Importieren des Enkelkinds wurden die im Kind definierten Variablen angezeigt.

Dies scheint ein Fehler in weniger zu sein - dh, der schlechte Import sollte in der Ausgabe von lessc erscheinen, also wird er eines Tages wahrscheinlich behoben. Bis dahin hoffe ich, dass das hilft.

5
mikemaccana

Beim Winless-Compiler ist das gleiche Problem aufgetreten.

Einige der .less-Dateien, die ich in master.less importierte, waren leer. Als ich diese aus der Liste der importierten Dateien entfernte, wurden meine Variablen erkannt!

5
Adam

Um allen anderen zu helfen, die darauf stoßen können, dass kein doppeltes CSS aus mehreren Importen generiert werden soll, haben Sie zwei Möglichkeiten.

  1. Entweder @ import-einmal die Variablen/Mixins-Dateien, die Sie in jeder Datei benötigen, in der Sie sie benötigen. 

    Verwenden Sie @import-once "filename.less";, um Duplikate zu verhindern.

  2. Upgrade auf LESS> 1.4.0, wenn es ankommt; Von der weniger Website:

    "The statement @import acts differently before and after 1.4.0. It acts as @import-multiple in all older versions and as @import-once in all less.js versions after 1.4.0."

1
Austen Cameron

Sie können diesen Fehler auch erhalten, wenn Sie versuchen, die Datei zweimal zu importieren (keine gute Idee) und der erste Import vor dem Laden Ihrer Variablen in Ihrer.less-Datei ist

Hinweis: Ich verwende Django-Kompresse

in index.html hatte ich:

{% compress css %}
<link href="{{ STATIC_URL }}less/timepicker.less" rel="stylesheet" type="text/less">
<link href="{{ STATIC_URL }}less/style.less" rel="stylesheet" type="text/less">
{% endcompress %}

dann in styles.less hatte ich

...
@import "timepick.less";
1
lukeaus

Ich denke, es liegt daran, welche Master-Datei Sie weniger kompilieren. Gleichfalls

Wenn Sie Less/Project_name/project.less und in diesem Projekt haben, importieren Sie die Variable less und alle anderen Dateien, die sich im Verzeichnis befinden. 

Sie müssen nur project.less in Ihre CSS kompilieren, nicht alle Dateien. Wenn Sie versuchen, projekt.less und variables.less zu einem Zeitpunkt zu kompilieren, wird dieser Fehler angezeigt. Und Sie können eine redundante Deklaration des Imports der Variablen weniger Dateien vermeiden

1

Eine andere sonderbare Situation, in der dies der Fall ist: Wenn Sie .NET und Dotless verwenden, wird der Compiler verschachtelte Medienabfragen mit Variablenspezifizierern verschlucken. Wenn Sie Code wie diesen haben:

@media (min-width: @aVariable) {
    .some-class{
        margin: 10px;

        @media (min-width: @anotherVariable) {
            margin: 20px;
        }
}

... dann wird dotless Ihnen mitteilen, dass @anotherVariable die Definition nicht finden kann, selbst wenn es oben drei Zeilen verwendet wird.

0

Für mich ist es passiert, wenn @ Import-einmal benutzt wird und nichts hilft.

wie ich in der letzten Version von Less gelesen habe, funktioniert der Import als Import-Once.

0
amichai

Ich würde die verschachtelten Regeln in der normalize.less verwenden:

a {
     color: @linkColor;

     &:visited {color: @linkColor;}

     &:hover {color: @linkColorHover;}
}

Und im @import brauchen Sie nicht ".less" zu verwenden, es ist optional:

@import "variables";
@import "normalize";

Ich weiß nicht, ob das helfen kann ...

0
Stef