Загружать переменные в препроцессор LESS CSS из файла JSON

Ответ 1

В less.js вы можете использовать интерполяцию javascript (используя обратные тики). И вызовите функцию, которая загружает объект json с переменными из файла... из которого вы можете извлечь переменную по ее ключу - что-то в этом направлении возможно:

@json_file: myvars.json;

@json: ~`json = function($key) { var request = new XMLHttpRequest(); request.open("GET", "@{json_file}", false); request.send(null); var my_json = JSON.parse(request.responseText); return my_json[$key]; }`;

body {
  background-color: ~`json('color1')`;
}

это может показаться не очень элегантным, но оно работает. Более элегантный вариант, вероятно, заключался бы в определении вашей пользовательской функции в глобальном объекте LESS перед вызовом script, но я никогда не беспокоился о том, чтобы играть с этим, так как я всегда использовал клиентскую сторону LESS только в разработке.

Еще одна вещь, которую вы можете сделать - это загрузить json файл в javascript (после вызова LESS script в браузере) и с помощью функции less.modifyVars() перекомпилировать LESS с помощью json-переменных. Вы можете сделать что-то в этом направлении в своем html (здесь я использую простой JS, но это еще проще, если вы используете jQuery.getJSON):

<link rel="stylesheet/less" href="style.less" type="text/css">
<script type="text/javascript">less = { env: "development" };</script>
<script src="http://rawgithub.com/less/less.js/master/dist/less-1.4.1.min.js" ></script>
<script type="text/javascript">
    var request = new XMLHttpRequest();
    request.open("GET", "myvars.json", false);
    request.send(null);
    var my_json = JSON.parse(request.responseText);
    less.modifyVars(my_json);
</script>

и что-то вроде этого в файле стиля LESS:

@color1: darkblue; //default value - will get overwritten by .modifyVars()

body {
  background-color: @color1;
}

Другое примечание: все имена переменных в LESS должны начинаться со знака at (@). Однако переменные json не нужны, потому что less.modifyVars() автоматически добавляет переменные с @, если отсутствует.

Надеюсь, это даст вам некоторые идеи. Там могут быть лучшие способы сделать это... но эти два подхода сработали для меня.

Ответ 2

Если вы не используете LESS в браузере, но компилируете CSS, я просто публикую плагин gulp для выполнения этой задачи.

Он может выглядеть так:

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

Ответ 3

При использовании LESS в браузере существует также опция 'globalVars', которая может использоваться для установки переменных перед загрузкой файлов LESS: http://lesscss.org/usage/#using-less-in-the-browser-options

Ответ 4

Вы можете использовать globalVars less для предоставления объекта, загруженного из файла json.

Например, с плагином less-loader webpack.config.js будет выглядеть так:

function lessGlobalVars() {
    return require('flat')(require('./path/to/config.json'),
        {
            delimiter: '_'
        });
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
            options: {
              globalVars: lessGlobalVars()
            }
          }
        ]
      }
    ]
  }
};

config.json:

{
  "dimensions": {
    "width": 100,
    "height": 50
  }
}

globalVars принимает только плоские структуры, поэтому нам нужен плоский пакет, который сгладит объект, загруженный с помощью require('./path/to/config.json') для:

{
  dimensions_width: 100,
  dimensions_height: 50
}

Передача этого объекта в параметр globalVars сделает глобальные переменные @dimensions_width и @dimensions_height доступными для всех ваших менее @dimensions_height таблиц:

.some-class {
  width: @dimensions_width;
  height: @dimensions_height;
}