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

Variable Name Error "is undefined" even though "variables.less" imported

提问by conradkleinespel

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

我今天开始使用 LESS。但这有点奇怪。此代码不起作用。我收到一个错误：

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

My bootstrap:

我的引导程序：

@import "variables.less";
@import "normalize.less";

variables.less:

变量.less：

@linkColor:             #08c;
@linkColorHover:        darken(@linkColor, 15%);

normalize.less:

规范化.less：

a {
    color: @linkColor;
}
a:visited {
    color: @linkColor;
}
a:hover {
    color: @linkColorHover;
}

When I make an

当我做一个

@import "variables.less"

@import "variables.less"

in the normalize.less file, everything works fine.

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

Thanks for your help :)

谢谢你的帮助 ：）

采纳答案by Chris Jaynes

This other questionultimately 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 Markfor those not familiar with the term.) This is the default setting in some editors, such as Visual Studio.

如果文件是用 BOM 编码的，那么 LESS 编译器似乎会默默地失败。（对于那些不熟悉该术语的人来说，这是一个字节顺序标记。）这是某些编辑器（例如 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.

如果 BOM 在您的根文件中，编译器会在 BOM 上出现错误，但对于 @import-ed 文件，它似乎无声无息地失败。

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

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

回答by Evi Song

There may be another possible root cause.

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

Here is my original Gruntfile.js:

这是我原来的 Gruntfile.js：

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

The wildcard makes LESS compiler compile all .less files under that folder and merge all results into one CSS. And I got errors running grunt less:compile:

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

NameError: .transition is undefined in less/core/html.less on line 38, column 3

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

Once I changed 'less/**/*.less'into 'less/css.less', the compilation succeeds.

一旦我'less/**/*.less'变成'less/css.less'，编译成功。

回答by Adam

I encountered the same problem using Winless compiler.

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

Some of the .less files i was importing into master.less were empty. when i removed these from the list of imported files my variables were recognized!

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

回答by mikemaccana

This error can also occur via bad imports in the files you're importing.

此错误也可能因您正在导入的文件中的错误导入而发生。

I also encountered this issue, when using multiple layers of import, and the 'lessc' compiler from Node.js:

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

• The original file imported a file (which we will call 'child')
• The child file imported a file (which we will call 'grandchild')
• The grandchild was imported

• 原始文件导入了一个文件（我们称之为“子文件”）
• 子文件导入了一个文件（我们称之为“孙子”）
• 孙子是进口的

I attempted to compile the original file, and received the same 'undefined variable' behavior. I could see the variable was defined in the child and the syntax lookedcorrect.

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

No prior errors were displayed.

没有显示先前的错误。

The problem turned out that the child was not importing the grandchild properly. Ie,

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

@import grandchild.less

rather than:

而不是：

@import "grandchild.less";

Fixing the child importing the grandchild made the original see the variables defined in the child.

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

This seems like a bug in less - ie, the bad import should show up in the 'lessc' output, so one day it will probably be fixed. Until then, I hope this helps.

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

回答by Austen Cameron

To help any others that may come across this not want duplicate CSS generated from multiple imports, you have two options.

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

1. Either @import-once the variables / mixins files you need in each file you need to use them in.

   Use @import-once "filename.less";to prevent duplicates.

2. Upgrade to LESS > 1.4.0, when it arrives; From the less website:

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

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

   使用@import-once "filename.less";以避免重复。

2. 升级到 LESS > 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."

回答by lukeaus

You can also get this error if you are trying to import the file twice (not a good idea) and the first import is before your variables referenced in your.less file have been loaded

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

Note: I'm using django compress

注意：我正在使用 django 压缩

in index.html i had:

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

then in styles.less i had

然后在styles.less我有

...
@import "timepick.less";

回答by Saurabh Kalantri

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

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

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.

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

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

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

回答by Stef

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

我会在 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 中，您不需要使用“.less”，它是可选的：

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

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

不知道这个能不能帮...

回答by The Digital Gabeg

One other weirdly specific situation in which this occurs: if you're using .NET and dotless, the compiler will choke on nested media queries with variable specifiers. If you have code like this:

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

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

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

... then dotless will tell you that it can't find the definition for @anotherVariable, even if it's used three lines above.

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

回答by amichai

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

对我来说，它发生在使用 @Import-once 时，没有任何帮助。但与@Import 其工作。

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

正如我在 Less 的最后一个版本中读到的那样，导入将用作导入一次。