Làm thế nào để có sourcemaps bao gồm tất cả các file LESS của tôi với ngụm

Question

Tôi có hai tập tin LESS trong thư mục của tôi/xuống:

main.less:

@import 'vars'; 

body{ 
    background-color: @blau; 
} 

và vars.less

@blau : #6621ab; 

Nhiệm vụ gulp của tôi bằng gulp-less và gulp-sourcemaps

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

Tạo CSS (tại /public/main.css) hoạt động tốt, nhưng trong sourcemaps, tôi chỉ có thể thấy main.less, chứ không phải vars.less. Bất kỳ ý tưởng? Cảm ơn trước

Answer 1

Theo như tôi hiểu cấu hình của bạn tạo mã sourcemap sau:

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

Phiên bản được mã hóa:

{"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/"} 

bạn vars.less không tạo ra bất kỳ đầu ra cho CSS và do đó không nên bao gồm trong sourcemap.

Ngay sau khi vars.less của bạn tạo ra đầu ra, ví dụ thêm .selector {p:1;} ở phần cuối của tập tin này, các tập tin cũng sẽ được đưa vào bản đồ nguồn:

{"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/"} 

ý rằng trình biên dịch lessc có tùy chọn khác nhau cho bản đồ nguồn:

--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 

các ngụm-sourcemaps kết quả đầu ra kết quả tương tự như biên soạn với cả --source-map-less-inline và --source-map-map-inline tùy chọn