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

【问题标题】：Variable Name Error "is undefined" even though "variables.less" imported即使导入了“variables.less”，变量名称错误“未定义”
【发布时间】：2012-02-05 03:38:06
【问题描述】：

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

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

我的引导程序：

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

variables.less:

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

规范化.less：

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

当我做一个

@import "variables.less"

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

感谢您的帮助:)

【问题讨论】：

如何编译成.css？使用 less.js 或软件编译器？好奇这是否会有所不同.. 将您的文件托管在某个地方以便我们可以检查（如果可能的话） - 我从来没有遇到过这种文件结构的问题。
对不起，我之前没有看到这条评论。我认为这可能是我的 Linux 上错误设置文件权限的问题：s 无论如何，现在一切似乎都正常！
@conradk 我在 OS X 上使用 Less.app 时遇到了同样的问题。更改权限有何帮助？
如果我没记错的话，我必须在“/home/myAccount”文件夹上设置限制性权限，该文件夹也包含我的 webroot。

标签： css less

【解决方案1】：

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

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

如果 BOM 在您的根文件中，编译器会在 BOM 上报错，但对于 @import-ed 文件似乎会静默失败。

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

【讨论】：

知道 TextMate 是否犯了 BOM 罪行吗？
对不起，我不是 TextMate 用户。
我看错了。我在 Windows 上使用 Sublime Text 2。我选择了File > Save With Encoding > UTF-8 with BOM，我的grunt watch 重新编译了它，问题马上就消失了。无论如何感谢您的提示！

【解决方案2】：

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

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

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

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

没有显示先前的错误。

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

@import grandchild.less

而不是：

@import "grandchild.less";

修复子导入孙子的问题，使原来的看到子中定义的变量。

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

【讨论】：

【解决方案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'，编译成功。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

@import-一次你需要的变量/mixins文件在你需要用到的每个文件中。

使用@import-once "filename.less"; 防止重复。
升级到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."

【讨论】：

这是一个非常重要的区别。感谢您指出这一点！

【解决方案6】：

如果您尝试导入文件两次（不是一个好主意）并且第一次导入是在 your.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";

【讨论】：

我建议不要在模板中使用STATIC_URL - staticfiles.productiondjango.com/blog/…
“如果您尝试两次导入文件，也会出现此错误” - 是的，感谢您发布此信息。这是解决我的问题的关键。

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

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

a {
     color: @linkColor;

     &:visited {color: @linkColor;}

     &:hover {color: @linkColorHover;}
}

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

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

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

【讨论】：

根据文档，它是 @import "filename";。您的解决方案不起作用。

【解决方案9】：

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

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

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

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

【讨论】：

【解决方案10】：

对我来说，这是在使用 @Import-once 时发生的，但没有任何帮助。但使用 @Import 可以正常工作。

正如我在上一版本的 Less the Import 中所读到的那样，Import 将作为 Import-once 工作。

【讨论】：