Search code examples
gulp-less

gulp-less undefined variable in the same file, no error running lessc


I am very perplexed...

I am using gulp-less to convert my less file to css. I have the following code:

@node_modules_path: "../../node_modules";
@bower_path: "../../bower_components";
@fonts_path: "../../../public/fonts";

//bootstrap components
@import "overides/bootstrap";
@import "@{node_modules_path}/bootstrap-select/less/bootstrap-select.less";
@import "@{bower_path}/bootstrap.checkbox/css/bootstrap-checkbox.css";
@import "@{bower_path}/bootstrap-vertical-tabs/bootstrap.vertical-tabs.css";

When I execute the gulpfile, I get the following error: Error: variable @bower_path is undefined in file /srv/www/frontend/build2/less/adex/style_default.less line no. 8

For some reason the @node_modules_path variable gives me no error.

Compiling the less file through lessc also works fine....


Solution

  • Seems to be an issue with less 1.7.5, that is used by gulp-less, it doesn't handle so well variables in sub-imports. The file that was giving me the problem was actually imported into another file. I solved it moving the variables definition to the file doing the import, and now all works fine. Lessc directly from the command line uses version 2, so that's why it worked there.