Undeclared variable with LESS @import. What is causing this? Is there a fix?

Question

I have 2 LESS files. Globals.less and Site.less. Globals.less contains all of my global (go figure) variables and an import to a CSS reset definition. Site.less contains the styles in use.

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');
}

The problem is this: In Visual Studio @color-background in Site.less is underlined and the error is "Undeclared variable", but the LESS compiles to CSS just fine and the background color is properly set to #000. It is more of an annoyance than anything, but I lose Intellisense and I get warnings in my error list. I would like the editor to act as expected and be able to "see" my declarations in Globals.less when I am editing Site.less. Am I doing something wrong, is this a bug, or is my environment not setup correctly?

Answer 1

To get intellisense for a particular less file you can add a reference path in the same way you would to get intellisense in a js file.

Example

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

@import "Globals.less";

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

Answer 2

It appears that Visual Studio (or it's LESS interpreter) does not understand the scope of the variable within the imported Globals.less

Importing variables is a normal and common thing to do so I'd suggest that it's a bug or missing feature in your Visual Studio setup.