2014-08-31 30 views
6

yudum ile tüm AZ dosyaları içerir:sahip Nasıl sourcemaps benim/az klasöründe iki AZ dosyanız

main.less:

@import 'vars'; 

body{ 
    background-color: @blau; 
} 

ve

@blau : #6621ab; 
vars.less

Gulp-less ve gulp-sourcemaps kullanarak benim gulp görevim

CSS nesli (/public/main.css adresinde) iyi çalışıyor, ancak sourcemaps'larda yalnızca main.less'i görebiliyorum, varsisiz değil. Herhangi bir fikir? Şimdiden teşekkürler

cevap

3

Bildiğim kadarıyla ben yapılandırma aşağıdaki sourcemap kodu oluşturmak anladığım kadarıyla:

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

kodlanmış versiyon:

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

Sizin vars.less CSS ve böylece herhangi bir çıktı oluşturmaz sourcemap içine dahil edilmemelidir. lessc derleyici için farklı seçeneği vardır

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

Bildirim o: En kısa sürede sizin vars.less olarak

çıkışı, mesela bunu dosyanın sonuna .selector {p:1;} eklemek üretir, bu dosya da kaynak haritası dahil edilecektir kaynak haritalar:

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

yudum-sourcemaps hem --source-map-less-inline ve --source-map-map-inline seçenekleri

ile derleme aynı sonucu verir
+2

Merhaba Bass! Gulp.src ('./ less/main.less') 'öğesini gulp.src ('./ less/*. Less') ile değiştirerek kendi varyasyonuyla birlikte vars.css dosyasını oluşturur. Sonra, benim html içine vars.css dahil, ben onun kaynağı görebiliyorum: D Dou varsysinging main.css içine eklemek için herhangi bir teknik biliyorum, bu yüzden sadece bir dosya eklemek zorunda? Zaman ayırdığın için teşekkürler! – Karlas

İlgili konular