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

This other question最终使我找到了正确的答案。

如果文件使用BOM进行编码，看起来LESS编译器会无声地失败。（对于不熟悉该术语的人来说，这是一个Byte Order Mark。）这是某些编辑器中的默认设置，例如Visual Studio。

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

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

Answer 2

可能还有其他可能的根本原因。

这是我原来的Gruntfile.js：

func()

通配符使LESS编译器编译该文件夹下的所有.less文件，并将所有结果合并到一个CSS中。我在运行less: { compile: { files: { 'css/less.css': 'less/**/*.less' } } },时遇到错误：

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

将grunt less:compile更改为'less/**/*.less'后，编译成功。

Answer 3

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

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

Answer 4

此错误也可能通过您导入的文件中的错误导入发生。

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

原始文件导入了一个文件（我们称之为'child'）
子文件导入了一个文件（我们称之为“孙子”）
孙子被导入

我尝试编译原始文件，并收到相同的“未定义变量”行为。我可以看到变量是在子节点中定义的，语法看起来很正确。

未显示任何先前错误。

问题是孩子没有正确地进口孙子。即，

@import grandchild.less

而不是：

@import "grandchild.less";

修复导入孙子的孩子使原件看到孩子中定义的变量。

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

Answer 5

为了帮助可能遇到此问题的其他人不希望从多个导入生成重复的CSS，您有两种选择。

@ import-一旦您需要在每个文件中使用变量/ mixins文件，就需要使用它们。

使用@import-once "filename.less";来防止重复。
升级到LESS＆gt; 1.4.0，到达时;来自较少的网站：

"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."

Answer 6

如果您尝试导入文件两次（不是一个好主意），并且第一次导入是在加载.less文件中引用的变量之前，也可能会出现此错误

注意：我使用的是django compress

index.html中的

我有：

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

然后在styles.less我有

...
@import "timepick.less";

Answer 7

我认为这是因为您正在编译的文件较少。同样

如果你有Less / Project_name / project.less并且在这个项目中没有你导入变量less和目录中的所有其他文件。

你只需将project.less编译到你的css中，而不是所有文件。如果您尝试一次编译project.less和variables.less，则会出现此错误。并且您可以避免导入变量较少文件的冗余声明

Answer 8

我会在normalize.less中使用嵌套规则：

a {
     color: @linkColor;

     &:visited {color: @linkColor;}

     &:hover {color: @linkColorHover;}
}

在@import中，你不需要使用“.less”，它是可选的：

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

我不知道这是否有帮助...

Answer 9

发生这种情况的另一个特殊情况：如果您使用.NET和无点，编译器将使用变量说明符阻塞嵌套媒体查询。如果你有这样的代码：

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

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

...然后dotless会告诉你它无法找到@anotherVariable的定义，即使它上面使用了三行。

Answer 10

对我而言，使用@ Import-once时没有任何帮助。但是@Import的确有效。

正如我在上一版本中所读到的那样，导入将作为导入一次。

变量名称错误“未定义”，即使导入了“variables.less”

10 个答案: