Как иметь sourcemaps включают все мои меньше файлов с gulp

у меня меньше двух файлов в папке / less:

main.меньше:

@import 'vars';

body{
  background-color: @blau;
}

и Варс.меньше

@blau : #6621ab;

моя задача gulp с помощью gulp-less и gulp-sourcemaps

gulp.task('less', function () {
  gulp.src('./less/main.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./public/'))
});

генерация CSS (at / public / main.css) отлично работает, но в sourcemaps я вижу только main.меньше, не ВАР.меньше. Есть идеи? Заранее спасибо

6
gulp gulp-less gulp-sourcemaps less

1 ответов

насколько я понимаю, ваша конфигурация генерирует следующий код исходной карты:

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFLHlCQUFBIiwiZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGltcG9ydCAndmFycyc7XG5cbmJvZHl7XG4gIGJhY2tncm91bmQtY29sb3I6IEBibGF1O1xufVxuIl0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */

закодированную версию:

{"version":3,"sources":["main.less"],"names":[],"mappings":"AAEA;EACE,yBAAA","file":"main.css","sourcesContent":["@import 'vars';\n\nbody{\n  background-color: @blau;\n}\n"],"sourceRoot":"/source/"}

код vars.less не генерирует никаких выходных данных в CSS и поэтому не должен включаться в исходную карту.

как только vars.less генерирует вывод, например add .selector {p:1;} в конце этого файла, файл будет включен в карту источник:

{"version":3,"sources":["vars.less","main.less"],"names":[],"mappings":"AACA;EAAW,IAAA;;ACCX;EACE,yBAAA","file":"main.css","sourcesContent":["@blau : #6621ab;\n.selector {p:1;}\n","@import 'vars';\n\nbody{\n  background-color: @blau;\n}\n"],"sourceRoot":"/source/"}

обратите внимание, что компилятор lessc имеет другой вариант для исходных карт:

  --source-map[=FILENAME]  Outputs a v3 sourcemap to the filename (or output filename.map)
  --source-map-rootpath=X  adds this path onto the sourcemap filename and less file paths
  --source-map-basepath=X  Sets sourcemap base path, defaults to current working directory.
  --source-map-less-inline puts the less files into the map instead of referencing them
  --source-map-map-inline  puts the map (and any less files) into the output css file
  --source-map-url=URL     the complete url and filename put in the less file

gulp-sourcemaps выводит тот же результат, что и компиляция с обоими --source-map-less-inline и --source-map-map-inline опции

3