0

In a goal to harmonize the style of an SPA application I want to define somme style variable in a JSON file and use it in my Less compilation.

Basically it can work like this:

gulp.src('variables.json')
    .pipe(function () {
        // process to create a less file from json
    })
    .pipe(gulp.dest('less/_variable.json.less'))
    .on('end', function(){
        gulp.src(['less/*.less', '!less/_*.less'])
            .pipe(plugins.less())
            .pipe(gulp.dest('css'))
    });

And in less:

@import "_variables.json.less";
// Other things

Is-it possible to do it without create an intermediary file before doing the less compilation ? Is-it possible to merge the result of the first task and the Less source into a same vinyl fs to do the Less compilation ?

Best regards.

Techniv
  • 1,967
  • 15
  • 22
  • 1
    This is not a matter of "merging" anything in gulp. `less` by default resolves `@import` statements to the file system. You would have to write a [`less` plugin](http://lesscss.org/usage/#plugins) which provides a [`FileManager`](https://github.com/less/less.js/blob/master/lib/less/environment/file-manager-api.js) that loads files from a `vinyl` stream instead of the file system. Similar things are done by the `npm-import` and `bower-resolve` plugins which load files from `npm` and `bower` packages respectively. – Sven Schoenung Jul 01 '16 at 16:22

1 Answers1

0

Thanks sven-schoenung to you comment. But I don't want start the development of a Less plugin for now... So, I adopted another approach. I developed a gulp plugin which preprocess the less file to match a @json-import directive to inject the generate variables in the vinyl Less file.

It seems work well. So I published it on NPM.

https://www.npmjs.com/package/gulp-less-json-import

Techniv
  • 1,967
  • 15
  • 22