Load variables into LESS CSS preprocessor from JSON file

Question

Is it possible to load variables into LESS CSS preprocessor from a JSON file like you can do with Stylus?

With contents of file myvars.json

Answer 1

If you not use LESS in browser but compile the CSS, I just publish a gulp plugin to do this job.

It can look like this :

css/myvars.json

{
    "color1": "#112345",
    "color2": "#667890"
}

less/styles.less

@json-import "myvars.json";

body {
  background-color: @color1;
}

gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var lessJsonImport = require('gulp-less-json-import');

gulp.task('less', function(){ 
  gulp.src(['./less/**/*.less', '!./less/**/_*.less'])
      .pipe(lessJsonImport())
      .pipe(less())
      .pipe(gulp.dest('./css'));
});