变量名称错误"未定义",即使导入了"variables.less"

Question

我今天开始使用LESS了.但它有点奇怪.此代码不起作用.我收到一个错误:

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

我的引导:

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

当我做一个

@import"variables.less"

在normalize.less文件中,一切正常.

谢谢你的帮助 :)

Answer 1

这个问题最终导致我找到了正确的答案.

如果使用BOM编码文件,看起来LESS编译器会无声地失败.(对于那些不熟悉该术语的人来说,这是一个字节顺序标记.)这是某些编辑器(如Visual Studio)中的默认设置.

如果它位于根文件中,编译器会在BOM上标记错误,但是对于@ import-ed文件似乎无声地失败.

尝试将文件保存为UTF-8而不使用BOM,并查看是否能解决您的问题.

Answer 2

可能还有另一个可能的根本原因.

这是我原来的Gruntfile.js:

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

通配符使LESS编译器编译该文件夹下的所有.less文件,并将所有结果合并到一个CSS中.我运行错误grunt less:compile:

NameError:.transition在第38行第3列的less/core/html.less中未定义

一旦我'less/**/*.less'进入'less/css.less',编译成功.

Answer 3

我使用Winless编译器遇到了同样的问题.

我导入master.less的一些.less文件是空的.当我从导入文件列表中删除这些变量时,我的变量被识别出来!

Answer 4

您导入的文件中的错误导入也会发生此错误.

当使用多个导入层和Node.js中的'lessc'编译器时,我也遇到了这个问题:

我试图编译原始文件,并收到相同的"未定义变量"行为.我可以看到变量是在子节点中定义的,语法看起来是正确的.

没有显示先前的错误.

问题是孩子没有正确地进口孙子.也就是说,

@import grandchild.less

而不是:

@import "grandchild.less";

修复导入孙子的子项使原始版本看到子项中定义的变量.

这似乎是一个较少的错误 - 即,错误的导入应该出现在'lessc'输出中,所以有一天它可能会被修复.在那之前,我希望这会有所帮助.