gulp-less ignores variable overrides.

[crazyjat]

I am using ui-grid in my project and I have a less variable override to set the @bootstrapDirectory to /lib/bootstrap/

This variable override works just fine in my less when using the runtime compilation, however it is completely ignored when using the gulp-less compilation task.

Is there any way to fix this issue?

[stephenlacy]

Please add your gulpfile with the options for setting the directory variable.

[crazyjat]

I figured out the issue. The gulp-less task seems to compile the less file from bottom up and the in browser runtime compilation is going from top down.

If I simply specify the @bootstrapDirectory variable override at both the top and bottom of my less file it works in both the browser and the gulp-less task.

This is an odd behavior and should be consistent with how the browser runtime compilation works.

[crazyjat]

Another odd difference is that when using the in browser runtime compilation, changing the value of a variable anywhere will affect all references to that variable. Using the gulp-less task it very much matters where the variable is overridden.

For example, the bootstrap.less file imports all of its dependencies. The first one being variables.less. In the bootstrap variables.less file they define a variable, @icon-font-path. I have this overridden in my variables.less file and this works fine in the browser. However because the bootstrap.less file lists all of the dependencies all in one place, the gulp-less task doesn't pick up my override.

Why is there such a difference?

my gulp task looks like:

gulp.task('less', function() {
    return gulp.src('./app/style/master.less')
        .pipe(sourcemaps.init())
        .pipe(less({ relativeUrls: false, paths: [ "./" ] }))
        .pipe(concat('style.css'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.dest));
});

[stephenlacy]

I edited your post to respect the new lines in gh. I'll look into the issue, I notice that there aren't any variables overridden in the gulp task - thus it is a file precedence issue. Top down unix style file structure, ie: whichever gets written Last takes precedence. This is actually a file structure "feature" and not quite a gulp related issue

[crazyjat]

I would love to override the variables in the gulp task so I don't have to mess with this difference between the runtime compile and the gulp-less task.

I don't see any examples on the github page. How would I do this?

[wencesbc]

I am facing a problem like this right now: overriding @grid-columns variable from bootstrap into my own code on same file leads to the variable not being overriden.

did you finally solve this @crazyjat ?