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.
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.