How to have source maps include all my LESS files with gulp

Question

I have two LESS files in my / smaller 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 (in / public / main.css) works fine, but in the source maps I can only see main.less, not vars.less. Any ideas? thanks in advance

Answer 1

As far as I understand, your configuration generates the following sourcemap code:

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

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 CSS output and therefore should not be included in the original map.

Once your vars.less generates output, for example, add .selector {p:1;} at the end of this file, the file will also be included in the original 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/"} 

Note that the lessc compiler has another 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 

gulp -sourcemaps produces the same result as compiling with the --source-map-less-inline and --source-map-map-inline