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

我今天开始使用LESS。但它有点奇怪。此代码不起作用。我得到一个错误：变量名称错误“未定义”，即使导入了“variables.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文件中，一切工作正常。

感谢您的帮助:)

来源

2012-02-05 conradkdotcom

你怎么编译成.css？使用less.js或软件编译器？好奇，如果这有所作为..主机你的文件的地方，以便我们可以检查（如果可能） - 我从来没有这样的文件结构的问题。 – bzx 2012-02-05 20:45:02

对不起，我现在没有看到此评论。我认为这可能是在我的Linux上错误地设置了文件权限的问题：无论如何，现在一切似乎都工作正常！ – conradkdotcom 2012-02-14 20:13:07

@conradk我在OS X上遇到了与Less.app一起工作的相同问题。更改权限如何提供帮助？ – 2012-03-12 13:42:32

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

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

如果编译器位于您的根文件中，但会在BOM中出现错误，但似乎默默地失败了@导入编辑的文件。

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

来源

2012-05-17 15:55:05

关于TextMate是否犯有BOM犯罪的任何想法？ – ken 2012-07-20 12:38:12

对不起，我不是TextMate用户。 – 2012-07-21 13:43:42

我误解了这个。我在Windows上使用Sublime Text 2。我选择了'File> Save With Encoding>带有BOM的UTF-8'，我的'grunt watch'重新编译了它，问题就马上消失了。无论如何感谢提示！ – rtpHarry 2015-01-28 12:45:39

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

a { 
    color: @linkColor; 

    &:visited {color: @linkColor;} 

    &:hover {color: @linkColorHover;} 
}

而在@import，你并不需要使用” .LESS ”，它是可选：

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

我不知道这是否可以帮助...

来源

2012-02-05 10:43:13 Stef

根据文档，它是@import“文件名”;.您的解决方案不起作用。 – conradkdotcom 2012-02-05 13:03:53

我遇到了同样的PROBL他们使用Winless编译器。

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

来源

2012-04-23 14:08:18 Adam

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

我也遇到过这个问题，使用进口的多层时，和Node.js的的“lessc”编译：

原始文件导入的文件（我们称之为“孩子”）
子文件导入的文件（我们称之为“孙子”）
的外孙进口

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

未显示任何先前的错误。

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

@import grandchild.less

而不是：

@import "grandchild.less";

固定孩子进口孙子做原来看到孩子定义的变量。

这看起来像一个更少的bug - 即坏导入应显示在'lessc'输出中，所以有一天它可能会被修复。在此之前，我希望这有助于。

来源

2012-11-07 12:35:40 mikemaccana

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

无论是@进口，一旦你需要在每个文件，你需要使用这些变量/混合类型的文件。

使用@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."

来源

2013-02-27 22:32:16

这是一个非常重要的区别。感谢您指出这一点！ – Moritz 2014-10-30 15:30:24

另外一个古怪的具体情况在发生这种情况：如果你使用.NET和带点，编译器会窒息可变符嵌套的媒体查询。如果你有这样的代码：

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

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

...然后带点会告诉你它找不到@anotherVariable的定义，即使它使用上述三行。

来源

2014-10-30 19:11:38

对我来说，它发生时使用@导入一次，没有任何帮助。但用@Import工作。

因为我在导入的最后一个版本中读取将导入一次。

来源

2014-12-14 09:59:27 amichai

你也可以得到这个错误，如果你尝试两次要导入的文件（不是一个好主意），并首次进口之前在your.less文件中引用您的变量已经被加载

注：我米使用Django 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";

来源

2015-02-02 21:33:10

我会建议不要使用'模板STATIC_URL' - http://staticfiles.productiondjango.com/blog/stop-using-static-url-in-templates/ – 2015-02-02 22:44:19

感谢@KristianGlass！ – 2015-02-03 01:07:43

“如果您试图将文件导入两次，也可能会出现此错误” - 是的，感谢您发布此信息。这是解决我的问题的关键。 github上的 – jwogrady 2016-10-28 02:15:44

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

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

你只需要编译项目。少到你的CSS，而不是全部少的文件。如果你一次尝试编译project.less和variables.less，你将会遇到这个错误。你可以导入避免变少的文件

来源

2015-06-21 19:33:52

有可能是另一个可能的根本原因的冗余声明。

这是我原来的Gruntfile.js：

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

通配符使得LESS编译器编译文件夹下的所有文件.LESS和所有结果合并到一个CSS。我跑了错误grunt less:compile：

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

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

来源

2015-07-30 11:47:04

问题：https：//github.com/jgable/grunt-lesslint/issues/7 – orszaczky 2015-09-21 13:41:51

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

回答

相关问题