在html中未定义变量,css-即使导入了“ variables.less”，“变量名错误”仍未定义...

最新推荐文章于 2023-09-21 17:50:25 发布

weixin_39981624

最新推荐文章于 2023-09-21 17:50:25 发布

阅读量499

点赞数

文章标签：在html中未定义变量

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

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

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

我的引导程序：

@import "variables.less";

@import "normalize.less";

无变量：

@linkColor: #08c;

@linkColorHover: darken(@linkColor, 15%);

标准化：

a {

color: @linkColor;

}

a:visited {

color: @linkColor;

}

a:hover {

color: @linkColorHover;

}

当我做一个

@import“ variables.less”

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

谢谢你的帮助：)

conradkdotcom asked 2020-06-20T10:24:52Z

10个解决方案

31 votes

另一个问题最终使我找到了正确的答案。

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

编译器阻止BOM表上的错误(如果它在您的根文件中)，但对于@ import-ed文件似乎无提示地失败。

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

Chris Jaynes answered 2020-06-20T10:25:20Z

6 votes

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

这是我原始的Gruntfile.js：

less: {

compile: {

files: {

'css/less.css': 'less/**/*.less'

}

通配符使LESS编译器可以编译该文件夹下的所有.less文件，并将所有结果合并为一个CSS。我在运行'less/**/*.less'时遇到错误：

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

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

Evi Song answered 2020-06-20T10:25:58Z

5 votes

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

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

Adam answered 2020-06-20T10:26:23Z

5 votes

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

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

原始文件导入了一个文件(我们将其称为“子”)

子文件导入了一个文件(我们将其称为“孙子”)

孙子是进口的

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

没有显示先前的错误。

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

@import grandchild.less

而不是：

@import "grandchild.less";

修复导入孙子代的子代后，原件将看到子代中定义的变量。

这似乎少了一个错误-即错误的导入应该出现在“ lessc”输出中，因此有一天它可能会得到修复。在此之前，我希望这会有所帮助。

mikemaccana answered 2020-06-20T10:27:27Z

1 votes

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

@ import-once在需要使用它们的每个文件中添加一次所需的变量/ mixins文件。

使用"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."防止重复。

到达时，升级到LESS> 1.4.0；从less网站上：

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

Austen Cameron answered 2020-06-20T10:28:05Z

1 votes

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

注意：我正在使用Django压缩

在index.html中，我有：

{% compress css %}

{% endcompress %}

然后在styles.less我有

...

@import "timepick.less";

lukeaus answered 2020-06-20T10:28:38Z

1 votes