javascript - gulp sourcemap is created but not working -

styles

styles.less

@import "one.less"; @import "two.less"; 

one.less

body { background:red; } 

two.less

body { font-size: 12px; } 

gulpfile.js

var gulp = require('gulp'); var less = require('gulp-less'); var sourcemaps = require('gulp-sourcemaps');  gulp.src('./src/assets/less/styles.less')   .pipe(less())   .pipe(sourcemaps.init({loadmaps: true}))   .pipe(sourcemaps.write('./'))   .pipe(gulp.dest('./dist/css/')); 

result: styles.css + styles.map.css created map file doesn't load when enter web page (and when inspect "body" see styles.css)

links
gulp less - https://github.com/plus3network/gulp-less
gulp-sourcemaps - https://github.com/floridoo/gulp-sourcemaps

i'm frustrated, i'd appreciate help. thanks.

you're "piping" less() before initializing sourcemap plugin, right way is:

var gulp = require('gulp'); var less = require('gulp-less'); var sourcemaps = require('gulp-sourcemaps');  gulp.src('./src/assets/less/styles.less')   .pipe(sourcemaps.init({loadmaps: true}))   .pipe(less())//<<< between init , write   .pipe(sourcemaps.write('./'))   .pipe(gulp.dest('./dist/css/'));