web-dev-qa-db-fra.com

Erreur de nom de variable "n'est pas définie" bien que "variables.less" ait été importé

J'ai commencé à utiliser MOINS aujourd'hui. Mais c'est un peu bizarre. Ce code ne fonctionne pas. Je reçois une erreur:

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

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 de votre aide :)

cssless
47
conradkdotcom

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

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

Le compilateur génère une erreur sur la nomenclature s'il se trouve dans votre fichier racine, mais semble échouer en mode silencieux pour les fichiers @ import-ed.

Essayez d’enregistrer vos fichiers au format UTF-8 sans nomenclature et voyez si cela résout votre problème.

31
Chris Jaynes

Il peut y avoir une autre cause possible.

Voici mon original Gruntfile.js:

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

Le caractère générique permet au compilateur LESS de compiler tous les fichiers .less dans ce dossier et de fusionner tous les résultats dans un seul fichier CSS. Et j'ai eu des erreurs en cours d'exécution grunt less:compile: 

NameError: .transition n'est pas défini dans less/core/html.less à la ligne 38, colonne 3

Une fois que j'ai changé 'less/**/*.less' en 'less/css.less', la compilation réussit. 

6
Evi Song

Cette erreur peut également se produire via de mauvaises importations dans les fichiers que vous importez.

J'ai également rencontré ce problème lors de l'utilisation de plusieurs couches d'importation et du 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-fils a été importé

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

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

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

@import grandchild.less

plutôt que:

@import "grandchild.less";

La correction de l’enfant important le petit-enfant a fait apparaître l’original aux variables définies dans l’enfant.

Cela ressemble à un bogue dans less - c’est-à-dire que la mauvaise importation devrait apparaître dans la sortie 'lessc', donc un jour il sera probablement corrigé. Jusque-là, j'espère que cela aide.

5
mikemaccana

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. Quand j'ai retiré ces fichiers de la liste des fichiers importés, mes variables ont été reconnues!

5
Adam

Pour aider les autres personnes susceptibles de rencontrer ce problème et pour éviter les doublons CSS générés à partir de plusieurs importations, vous avez deux options.

  1. Soit @ import-once les fichiers variables/mixins dont vous avez besoin dans chaque fichier, vous devez les utiliser. 

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

  2. Passez à MOINS> 1.4.0 à son arrivée; De moins site web:

    "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

Vous pouvez également obtenir cette erreur si vous essayez d'importer le fichier deux fois (ce qui n'est pas une bonne idée) et que la première importation a lieu avant le chargement des variables référencées dans votre fichier .less.

Note: J'utilise Django Compresse

dans index.html j'avais:

{% 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 %}

puis dans styles.less j'avais

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

Je pense que c'est à cause de quel fichier maître moins vous compilez. également

Si vous avez Less/nom_projet/project.less et dans ce projet.less, vous importez less et tous les autres fichiers contenus dans le répertoire. 

Il vous suffit de compiler project.less dans votre css, pas tous les fichiers de moins. Si vous essayez de compiler project.less et variables.less à la fois, vous aurez cette erreur. Et vous pouvez éviter la déclaration redondante d'importation de la variable sans fichiers

1
Saurabh Kalantri

Une autre situation étrange dans laquelle cela se produit est la suivante: si vous utilisez .NET et dotless, le compilateur s'étouffera avec les requêtes de média imbriquées avec des spécificateurs de variable. Si vous avez un code comme celui-ci:

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

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

... alors dotless vous dira qu'il ne trouve pas la définition de @anotherVariable, même s'il est utilisé trois lignes plus haut.

0
The Digital Gabeg

Pour moi, c’est arrivé avec @ Import-once et rien n’aide . Mais avec @Import, ça marche.

comme je l'ai lu dans la dernière version de Less, l'importation fonctionnera comme importation unique.

0
amichai

J'utiliserais les règles imbriquées dans 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 optionnel:

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

Je ne sais pas si cela peut aider ...

0
Stef