Variable Name Error “is undefined” even though “variables.less” imported

Question

I started using LESS today. But it\'s kinda weird. This code does not work. I get an error:

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

Answer 1

For me its happened when using @Import-once and nothing help. but with @Import its worked.

as i read in the last version of the Less the Import will work as Import-once.

Answer 2

This other question ultimately led me to the right answer.

It looks like the LESS compiler is silently failing if files are encoded with a BOM. (That's a Byte Order Mark for those not familiar with the term.) This is the default setting in some editors, such as Visual Studio.

The compiler barfs up an error on the BOM if it's in your root file, but seems to fail silently for @import-ed files.

Try saving your files as UTF-8 without a BOM, and see if that solves your problem.

Answer 3

I would use the nested rules in the normalize.less :

a {
     color: @linkColor;

     &:visited {color: @linkColor;}

     &:hover {color: @linkColorHover;}
}

And in the @import, you don't need to use the ".less", it's optional :

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

I don't know if this can help...

Answer 4

I think it is because of which master less file you are compiling. Likewise

If you have Less/Project_name/project.less and in this project.less you import the variable less and all the other files which has in the directory.

You just have to compile project.less into your css, not all less files. If you try to compile project.less and variables.less at a time you will have this error. And you can avoid redundant declaration of importing the variable less files