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.

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

When I make an

@import "variables.less"

in the normalize.less file, everything works fine.

Thanks for your help :)

Answer 1

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.