Can Gulp change LESS variables? - less

Question

I'm looking to toggle IE8 mode in my LESS files and automated the file generation in Gulp.
This is where I stopped in what to pass gulp-less (minus a bunch of stuff):
var IE = true;
var LESSConfig = {
plugins: [ ... ],
paths: LESSpath,
ie8compat: IE, //may as well toggle this
// Set in variables.less, #ie:false; - used in mixin & CSS guards
// many variations tried
// globalVars: [ { "ie":IE } ],
modifyVars:{ "ie":IE }
};
...
.pipe( less ( LESSConfig ) )
Is variable modification not supported in Gulp?
I'd like to avoid using gulp-modify et al if I can. I'd like to keep the build system fairly abstracted from the source files.

Answer 1

modifyVars is working for me now:
...
var LESSConfig = {
paths: paths.LESSImportPaths,
plugins: [
LESSGroupMediaQueries,
LESSautoprefix
],
modifyVars: {
ie: 'false'
}
};
var LESSConfigIE = {
paths: paths.LESSImportPaths,
modifyVars: {
ie: 'true'
}
};
function processLESS (src, IE, dest){
return gulp.src(src)
.pipe( $.if( IE, $.less( LESSConfigIE ), $.less( LESSConfig ) ) )
.pipe( $.if( IE, $.rename(function(path) { path.basename += "-ie"; }) ) )
.pipe( gulp.dest(dest) )
}
// build base.css files
gulp.task('base', function() {
return processLESS( paths.Base + '/*.less', false, paths.dest );
});
// build base-ie.css files for IE
gulp.task('baseIE', function() {
return processLESS( paths.Base + '/*.less', true, paths.dest );
});

Answer 2

Since I could not get this to work with gulp-lessand it became apparent to me that the application of globalVars and modifyVars are both broken, I came up with a different solution.
You can use gulp-append-prepend to write your variables into the file before gulp-less processes it. A little less elegant but, on the plus side, it actually works.
Something like this:
gulp.src('main.less')
.pipe(gap.prependText('#some-global-var: "foo";'))
.pipe(gap.appendText('#some-modify-var: "bar";'))
.pipe(less())
.pipe(gulp.dest('./dest/'));

Answer 3

Nowadays (2019) this problem seems to be fixed.
However it cost me still a lot of time to get it running.
Here is what I did:
gulp.task('lessVariants', ['less'], function() {
return gulp.src('less/styles.less', {base:'less/'})
.pipe(less({modifyVars:{'#color1': '#535859'}))
.pipe(less({modifyVars:{'#color2': '#ff0000'}))
.pipe(less({modifyVars:{'#color3': '#ccffcc'}))
.pipe(rename('styles.modified.css'))
.pipe(cleanCSS())
.pipe(gulp.dest(distFolder + 'css'))
})
This did not work. Only the last variable was modified. I changed it as follows to get it working:
gulp.task('lessVariants', ['less'], function() {
return gulp.src('less/styles.less', {base:'less/'})
.pipe(less({modifyVars: {
'#color1': '#535859',
'#color2': '#ff0000',
'#color3': '#ccffcc',
}}))
.pipe(rename('styles.variant.css'))
.pipe(cleanCSS())
.pipe(gulp.dest(distFolder + 'css'))
})