变量名称错误“未定义”即使“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“变量.less”

在 normalize.less 文件中，一切正常。

感谢您的帮助 ：）

Answer 1

这个其他问题最终引导我找到了正确的答案。

如果文件使用 BOM 编码，LESS 编译器似乎会默默地失败。 （对于那些不熟悉该术语的人来说，这是一个字节顺序标记。）这是默认设置在某些编辑器中，例如 Visual Studio。

如果 BOM 位于根文件中，编译器会在 BOM 上抛出错误，但对于 @import-ed 文件似乎会默默失败。

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

Answer 2

您导入的文件中的错误导入也可能导致此错误。

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

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

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

没有显示先前的错误。

问题原来是孩子没有正确导入孙子。即，

@import grandchild.less

而不是：

@import "grandchild.less";

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

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

Answer 3

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

这是我原来的 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 4

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

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

Answer 5

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

1. 或者@import-once您需要在每个文件中使用它们的变量/混合文件。

   使用@import-once "filename.less";来防止重复。

2. 升级到 LESS > 1.4.0，当它到达时；来自 less 网站：

   “语句@import在1.4.0之前和之后的行为有所不同。它在所有旧版本中充当@import-multiple，在1.4.0之后的所有less.js版本中充当@import-once。”< /code>

Answer 6

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

注意：我

在 index.html 中 使用 django compress我有：

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

然后在样式中。更少我有

...
@import "timepick.less";

Answer 7

我认为这是因为您正在编译哪个 master less 文件。同样，

如果您有 Less/Project_name/project.less 并且在此 project.less 中，您将导入变量 less 以及该目录中的所有其他文件。

你只需要把project.less编译到你的css中，而不是所有的less文件。如果您尝试同时编译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 和 dotless，编译器将因带有变量说明符的嵌套媒体查询而阻塞。如果你有这样的代码：

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

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

... 那么 dotless 会告诉你它找不到 @anotherVariable 的定义，即使它使用了上面的三行。

Answer 10

对我来说，它是在使用 @Import-once 时发生的，没有任何帮助。
但使用@Import 就可以了。

正如我在《Less》的最新版本中读到的那样，导入将作为导入一次运行。