Reputation: 1620
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?
Upvotes: 8
Views: 4426
Reputation: 15609
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');
}
Upvotes: 10
Reputation: 1620
It turns out that I was using an older version of Web Essentials 2012. The first thing I should have checked and failed to do was to ensure that my environment was up to date. Updating Web Essentials to the latest version corrected the issue.
Upvotes: 1
Reputation: 479
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.
Upvotes: 1