Nicht deklarierte Variable mit LESS @ import. Was verursacht das? Gibt es eine Lösung?

Question

Ich habe 2 LESS-Dateien. Globals.less und Site.less. Globals.less enthält alle meine globalen (go figure) Variablen und einen Import in eine CSS-Reset-Definition. Site.less enthält die verwendeten Stile.

Globals.less:

//Imports 
@import "CSSReset.less"; 

//Colors 
@color-background: rgb(0, 0 , 0); 

Site.less:

@import "Globals.less"; 

body { 
    background: @color-background url('/Images/BackgroundTextureBody.png'); 
} 

Das Problem ist folgendes: In Visual Studio @ color-Hintergrund in Site.less ist unterstrichen und der Fehler „Nicht angemeldete Variable ", aber die LESS kompiliert zu CSS einfach gut und die Hintergrundfarbe ist richtig auf # 000 eingestellt. Es ist mehr ein Ärgernis als alles andere, aber ich verliere Intellisense und ich bekomme Warnungen in meiner Fehlerliste. Ich möchte, dass der Editor wie erwartet agiert und in der Lage ist, meine Deklarationen in Globals.less zu "sehen", wenn ich Site.less bearbeite. Mache ich etwas falsch, ist das ein Fehler, oder ist meine Umgebung nicht richtig eingerichtet?

Answer 1

Es stellt sich heraus, dass ich eine ältere Version von Web Essentials 2012 verwendet habe. Das erste, was ich überprüfen und nicht tun sollte, war sicherzustellen, dass meine Umgebung auf dem neuesten Stand war. Durch die Aktualisierung von Web Essentials auf die neueste Version wurde das Problem behoben.

Answer 2

Es scheint, dass Visual Studio (oder es ist weniger Interpreter) versteht nicht, den Umfang der Variablen innerhalb des importierten Globals.less

Importieren von Variablen ist eine normale und gemeinsame Sache zu tun, so würde ich vorschlagen, dass es ein Fehler oder fehlende Funktion in Ihrem Visual Studio-Setup.

Answer 3

Um Intellisense für eine bestimmte weniger Datei zu erhalten, können Sie einen Referenzpfad auf die gleiche Weise hinzufügen, wie Sie Intellisense in einer js-Datei erhalten würden.

Beispiel

/// <reference path="Globals.less" /> 

@import "Globals.less"; 

body { 
    background: @color-background url('/Images/BackgroundTextureBody.png'); 
}