變量名稱錯誤「未定義」，即使導入了「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」

回答

相關問題