Visual Studio 2012 Web Essentials 3.7 LESS "variable ... is undefined"

Question

I have VS 2012 Premium Update 4 with the recently released (25 Feb 2014) Web Essentials 3.7 for compiling LESS files.

I'm customizing (Twitter) Bootstrap frontend framework by adding my own custom LESS-files to the compilation process:

I have this folder structure:

main-file.less
bootstrap/
    less/
        [all bootstrap .less files]
    custom/
        custom-mixins.less
        custom-other.less
        custom-variables.less

In main-file.less I have:

@import "bootstrap/less/bootstrap";
@import "bootstrap/custom/custom-variables";
@import "bootstrap/custom/custom-mixins";
@import "bootstrap/custom/custom-other";

It appears to make no difference whether I apply the ".less" extensions in the import directives or not.

When compiling main-files.less, I keep getting errors like:

variable @my-label-color is undefined
variable @grid-gutter-width is undefined

Any ideas for what might be wrong?

Colin Bacon Colin Bacon · Accepted Answer · 2014-03-04T09:17:16

Sounds like the import order is incorrect. Find out where those variables are defined and make sure that file is imported before the file where the variables are used.

Update

As correctly stated by seven-phases-max variables can be defined after they are used. Therefore more than likely you are using these two variables without actually assigning a value to them or defining them.

It maybe they are defined in a less file which you have not imported. Check where these variables are defined and ensure they are in main-files.less

Visual Studio 2012 Web Essentials 3.7 LESS "variable ... is undefined"

1 Answers