Web Essentials 2012 less import

Question

Have 2 files, i want to import variables stylesheet to second file, but in 1st case i get incorrect syntax errors in preview mode and in 2nd case i get undeclared variable error. Anyway both cases compile correct.

1st case with preview mode error:

variables.less:

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

style1.less:

@import 'variables.less';
div
{
    color:@color-background;
} 

2nd case with undeclared variable error:

variables.less:

html{color:red;}
@color-background: rgb(0, 0 , 0);

style1.less:

html{color:red;}
@import 'variables.less';
div
{
    color:@color-background;
} 

html{color:red} is just fix for preview mode. it could any valid html.

Problem is that i could start file only with html tag for getting preview mode, but not comment or import directive.

Answer 1

This is a bug in the LESS editor in Web Essentials. To get around it, always put your @import directives at the top of the document.

The issue was triggered because you had: html{color:red;} before the @import directive.

This issue is going to be fixed in an upcoming release of Web Essentials. No date yet, though.