How to have sourcemaps include all my LESS files with gulp - less

Question

I have two LESS files in my /less folder :
main.less:
#import 'vars';
body{
background-color: #blau;
}
and vars.less
#blau : #6621ab;
My gulp task using gulp-less and gulp-sourcemaps
gulp.task('less', function () {
gulp.src('./less/main.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./public/'))
});
CSS generation (at /public/main.css) works fine, but in sourcemaps, i can only see main.less, not vars.less . Any idea? Thanks in advance

Answer 1

As far as i understand your configuration generate the following sourcemap code:
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFLHlCQUFBIiwiZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGltcG9ydCAndmFycyc7XG5cbmJvZHl7XG4gIGJhY2tncm91bmQtY29sb3I6IEBibGF1O1xufVxuIl0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */
The encoded version:
{"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/"}
Your vars.less does not generate any output to the CSS and so should not included in the sourcemap.
As soon as your vars.less generates output, for instance add .selector {p:1;} at the end of this file, the file will also be included in the source map:
{"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/"}
Notice that the lessc compiler has different option for source maps:
--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
The gulp-sourcemaps outputs the same result as compiling with both the --source-map-less-inline and --source-map-map-inline options