[SOLVED] Gulp gulp-less and gulp-sourcemaps giving wrong sourceMappingURL

Gulp gulp-less and gulp-sourcemaps giving wrong sourceMappingURL

I have a gulp workflow with a simple less task like so:

gulp.task('less', function() {
    gulp.src(source_less)
        .pipe(sourcemaps.init())
        .pipe(less({
            sourceMap: true
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(dest_less));
});

I want the gulp-sourcemaps module to display source maps as inline comments in my CSS file. But whenever gulp compiles my LESS, the gulp-sourcemaps isn't displaying a path to my source file. Instead, it displays something like this:

/*#     sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2
        VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNJLG1DQUFBIiwi
        ZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsibmF2IHtcclxuICAgIGJhY2tncm91bmQtY29
        sb3I6IHllbGxvdyAhaW1wb3J0YW50O1xyXG59Il0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */

I dramatically simplified my gulpfile, removing livereload, autoprefixer and such. But even in this stripped down version I can't get the source URL to be right.

Been over this thing for quite some time now, any help would be very much appreciated!

Solution

You already have sourcemaps inline there. If you base64 decode what comes after sourceMappingURL=data:application/json;base64, you'll get this:

{"version":3,"sources":["main.less"],"names":[],"mappings":"AAAA;EACI,mCAAA","file":"main.css","sourcesContent":["nav {\r\n    background-color: yellow !important;\r\n}"],"sourceRoot":"/source/"}

Try it yourself here: https://www.base64decode.org/