беспорядок без глотка с глобальной переменной

Я пытаюсь передать строку версии из gulp в less, как показано в следующем примере проекта:

  • пакет.json:

    {
  "name": "webui",
  "version": "0.0.0",
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-less": "^3.0.5"
  }
}

  • gulpfile.js:

    var gulp = require('gulp');
var less = require('gulp-less');

var LESS_PARAMS = {
  globalVars: {
    webUiVersion: '0.0.0'
  }
};

gulp.task('less', function() {
  return gulp.src('test.less')
    .pipe(less(LESS_PARAMS))
    .pipe(gulp.dest('.'))
})

  • тест.без:

    .test {
  background: url("test.jpg?v=@{webUiVersion}")
}

При запуске gulp less сгенерированный файл test.css выглядит следующим образом:

.test {
  background: url("test.jpg?v=0 0");
}

Как видите, gulp-less каким-то образом превратил 0.0.0 в 0 0. Если я использую простую строку без точек или 0, например 123asdf, замена работает нормально. Кроме того, прямой вызов

lessc --global-var='webUiVersion="0.0.0"' test.less

в командной строке дает желаемый результат.

Итак, мои вопросы:

  • Это преднамеренное поведение или ошибка?
  • Есть ли способ обойти эту проблему?

gulp less gulp-less
person Matthias Langer    schedule 19.11.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел способ исправить эту проблему: Хитрость заключается в том, чтобы заключить строку, которая должна быть передана в less, в кавычки, то есть написать webUiVersion: '"0.0.0"' вместо webUiVersion: '0.0.0' в gulpfile.js.

Причина этого была указана seven-phases-max ниже: значение webUiVersion напрямую перешли на меньшее. Без кавычек 0.0.0 анализируется как два числа, а именно 0.0, за которым следует .0, что приводит к 0 0 в сгенерированном CSS.

person Matthias Langer    schedule 19.11.2015
comment
Это не обходной путь, а правильный метод на самом деле. Когда вы передаете строку с помощью JS, вам нужны два набора кавычек — один для JS, а второй для Less. Без вторых кавычек webUiVersion: '0.0.0' приводит к @webUiVersion: 0.0.0;, который интерпретируется как два числа (0.0, за которым следует .0, что в итоге дает CSS 0 0). - person seven-phases-max; 19.11.2015
comment
Большое спасибо, что указали на это! Я соответствующим образом адаптирую свой ответ. - person Matthias Langer; 19.11.2015