Can Gulp change LESS variables?

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.

score 2 · Accepted Answer · answered Feb 04 '16 at 21:21

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 );
     });

Why does this work for you? Why does this work for you but not me? — Okonomiyaki3000, Jan 25 '17 at 02:32
To clarify, this feature seems to be broken. My output indicates that `gulp-less` processes the less file __first__ and __then__ appends the new variables. So that what you end up with is a css file with less variables appended to the end. Obviously, it doesn't work. — Okonomiyaki3000, Jan 25 '17 at 03:00
Sorry about the delay. Not sure what to say except this continues to work for me. I'm on the latest versions. — Lance, Mar 14 '17 at 23:42

score 2 · Answer 2 · answered Jan 25 '17 at 03:07

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/'));

answered Jan 25 '17 at 03:07

Okonomiyaki3000

3,628
23
23

My main.less starts with @import "variables.less" - so if I prepend anything, it will be overwritten. – ESP32 Feb 12 '19 at 15:06
@Gerfried I haven't used Gulp for a while but...are you telling me this bug isn't fixed 2 years later? Hopefully my workaround is no longer needed. Well, if this is still a problem, maybe you can take the import out and just use Gulp to combine variables.less and main.less with whatever extra stuff you need sandwiched in between? – Okonomiyaki3000 Feb 13 '19 at 00:02
I think it works now - but I still had some problems (see my answer) – ESP32 Feb 13 '19 at 13:53

ESP32 · Answer 3 · 2019-02-13T15:39:34.097

2

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'))
})

edited Feb 13 '19 at 15:39

answered Feb 13 '19 at 13:52

ESP32

8,089
2
40
61

Regarding your second snippet: should not it be something like [this](https://gist.github.com/seven-phases-max/c77f777ee992e69ed4ada5df0e61bb19)? (i.e. a `modifyVars` may/should be a regular JS object. While the way you wrote is still expected to return [nothing but the last value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator)). – seven-phases-max Feb 13 '19 at 15:18
@seven-phases-max you are so right - thank you, I updated my sample code – ESP32 Feb 13 '19 at 15:41
1

That makes sense. Honestly, when looking at the first block, I was thinking "why not combine all these vars into a single object?". I'm sure it's slightly more efficient that way as well (although you might not notice unless you have hundreds of variables). – Okonomiyaki3000 Feb 14 '19 at 04:15

Can Gulp change LESS variables?

3 Answers3