Erreur de nom de variable "{{variableName}}" est indéfinie même si "variables.less" est importé.

Question

J'ai commencé à utiliser LESS aujourd'hui. Mais c'est un peu étrange. Ce code ne fonctionne pas. J'obtiens une erreur :

! Erreur de nom de variable : @linkColor dans a n'est pas défini.

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

Quand je fais un

@import "variables.less"

dans le fichier normalize.less, tout fonctionne bien.

Merci pour votre aide :)

Answer 1

Cette autre question m'a finalement conduit à la bonne réponse.

Il semble que le compilateur LESS échoue silencieusement si les fichiers sont encodés avec un BOM. (C'est un Byte Order Mark pour ceux qui ne sont pas familiers avec ce terme.) C'est le paramètre par défaut dans certains éditeurs, tels que Visual Studio.

Le compilateur renvoie une erreur sur le BOM s'il se trouve dans votre fichier racine, mais semble échouer silencieusement pour les fichiers @importés.

Essayez d'enregistrer vos fichiers en UTF-8 sans BOM, et voyez si cela résout votre problème.

Answer 2

Cette erreur peut également survenir en raison de mauvaises importations dans les fichiers que vous importez.

J'ai également rencontré ce problème en utilisant plusieurs niveaux d'importation et le compilateur 'lessc' de Node.js :

• Le fichier d'origine a importé un fichier (que nous appellerons 'enfant')
• Le fichier enfant a importé un fichier (que nous appellerons 'petit-enfant')
• Le petit-enfant a été importé

J'ai essayé de compiler le fichier d'origine et j'ai reçu le même comportement de 'variable indéfinie'. Je pouvais voir que la variable était définie dans l'enfant et la syntaxe semblait correcte.

Aucune erreur antérieure n'a été affichée.

Le problème s'est avéré être que l'enfant n'importait pas correctement le petit-enfant. C'est-à-dire,

@import grandchild.less

plutôt que :

@import "grandchild.less";

Le fait de corriger l'importation de l'enfant du petit-enfant a permis à l'original de voir les variables définies dans l'enfant.

Cela semble être un bogue dans less - c'est-à-dire, la mauvaise importation devrait apparaître dans la sortie de 'lessc', donc un jour cela sera probablement corrigé. En attendant, j'espère que cela vous aidera.

Answer 3

J'ai rencontré le même problème en utilisant le compilateur Winless.

Certains des fichiers .less que j'importais dans master.less étaient vides. Lorsque je les ai supprimés de la liste des fichiers importés, mes variables ont été reconnues !

Answer 4

Pour aider d'autres personnes qui pourraient rencontrer ce problème de génération de CSS en double à partir de plusieurs imports, vous avez deux options.

1. Soit vous utilisez @import-once avec les fichiers de variables / mixins dont vous avez besoin dans chaque fichier où vous avez besoin de les utiliser.

   Utilisez @import-once "nomdufichier.less"; pour éviter les doublons.

2. Mettons à jour vers LESS> 1.4.0, dès que cela arrivera; Depuis le site web de Less:

   "L'expression @import agit différemment avant et après la version 1.4.0. Elle agit comme @import-multiple dans toutes les versions plus anciennes et comme @import-once dans toutes les versions moins récentes de less.js après 1.4.0."

Answer 5

Je utiliserais les règles imbriquées dans le normalize.less :

a {
     color: @linkColor;

     &:visited {color: @linkColor;}

     &:hover {color: @linkColorHover;}
}

Et dans le @import, vous n'avez pas besoin d'utiliser le ".less", c'est facultatif :

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

Je ne sais pas si cela peut aider...