Path to source map is wrong

Question

I use the packages gulp-less and gulp-sourcemaps. My less file is located under Styles/main.less, but the generated source map points to source/main.less (where source/ seems to be a prefix). How to fix this, so the source map correctly points to source/Styles/main.less?

My gulp task is rather simple:

var gulp        = require('gulp'),
    less        = require('gulp-less'),
    gulpif      = require('gulp-if'),
    sourcemaps  = require('gulp-sourcemaps');

var paths = {
    styles: [
        'Styles/**/*.less',
        '!**/*.min.css'
    ],
    wwwRoot: 'wwwroot/'
}

var isLessFile = function(file) { return /.less$/.test(file.path); }

gulp.task('styles', function() {
    return gulp
        .src(paths.styles)
        .pipe(sourcemaps.init())
            .pipe(gulpif(isLessFile, less()))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(paths.wwwRoot + 'styles'));
});

Answer 1

sourcemaps.write('.',{includeContent:false, sourceRoot:'../Styles'})

Should work for you. By default you are including the source content in your sourcemap file and sourceRoot is probably '/source/' which means to use the embedded source files. includeContent:false will prevent embedding sources into the sourcemap file, you also have to set sourceRoot property to a relative path from where you save your sourcemap to where your source files are located. In my example it will look one folder up for Styles folder, this will be prefixed to all paths in your sourcemaps sources array.