Sourcemap wrong filename

Question

I have an issue with my gulpfile.js when generating sourcemaps for my sass. When I use Developer Tools to inspect an element it's source is shown as _box-sizing.scss when it's true source is _header.sass.

Here's an extract from my gulpfile.js

var options = {
    styles: {
        "source": "public/sass/main.sass",
        "destination": "public/css",
        "sourcemaps": "sourcemaps",
        "sourceRoot": "../../sass/"
    }
}

gulp.task('styles', function() {
    return sass(options.styles.source, {sourcemap: true, style: 'compressed'})
        .on('error', function(err) { console.error('Error!', err.message); })
        .pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7"))
        .pipe(sourcemaps.write(options.styles.sourcemaps, {includeContent: false, sourceRoot: options.styles.sourceRoot}))
        .pipe(gulp.dest(options.styles.destination));
});

This generates a sourcemap in public/css/sourcemaps. The sourceMappingURL in my .css file reads /*# sourceMappingURL=sourcemaps/main.css.map */

Which looks like this

{  
   "version":3,
   "sources":[  
      "main.css",
      "import/lib/_normalize.scss",
      "import/lib/neat/grid/_box-sizing.scss",
      "import/layouts/common/_header.sass"
   ],
   "names":[],
   "mappings":"AAAA,4ECQA,KACE,uBACA,0BACA,6BAA8B,CAOhC,KACE,QAAS,CAaX,2FAaE,aAAc,CAQhB,4BAIE,qBACA,uBAAwB,CAQ1B,sBACE,aACA,QAAS,CAQX,kBAEE,YAAa,CAUf,EACE,4BAA6B,CAQ/B,iBAEE,SAAU,CAUZ,YACE,wBAAyB,CAO3B,SAEE,gBAAiB,CAOnB,IACE,iBAAkB,CAQpB,GACE,cACA,eAAgB,CAOlB,KACE,gBACA,UAAW,CAOb,MACE,aAAc,CAOhB,QAEE,cACA,cACA,kBACA,uBAAwB,CAG1B,IACE,UAAW,CAGb,IACE,cAAe,CAUjB,IACE,QAAS,CAOX,eACE,eAAgB,CAUlB,OACE,eAAgB,CAOlB,GACE,uBACA,QAAS,CAOX,IACE,aAAc,CAOhB,kBAIE,iCACA,aAAc,CAkBhB,sCAKE,cACA,aACA,QAAS,CAOX,OACE,gBAAiB,CAUnB,cAEE,mBAAoB,CAWtB,0EAIE,0BACA,cAAe,CAOjB,sCAEE,cAAe,CAOjB,iDAEE,SACA,SAAU,CAQZ,MACE,kBAAmB,CAWrB,2CAEE,sBACA,SAAU,CASZ,gGAEE,WAAY,CAQd,qBACE,6BACA,sBAAuB,CASzB,mGAEE,uBAAwB,CAO1B,SACE,yBACA,aACA,6BAA8B,CAQhC,OACE,SACA,SAAU,CAOZ,SACE,aAAc,CAQhB,SACE,gBAAiB,CAUnB,MACE,yBACA,gBAAiB,CAGnB,MAEE,SAAU,CCnaV,KACE,qBAAsB,CAItB,qBAGE,kBAAmB,CCXzB,EACC,SAAU,CAAA",
   "file":"main.css",
   "sourceRoot":"../../sass/"
}

Any help would be appreciated. Thanks

@DavidAlsbright when I used Developer Tools to to inspect styles the wrong filename is shown. No matter the style source, the file show reads _box-sizing.scss — Mike Kaperys, Aug 06 '15 at 12:55
@MikeKaperys Almost a year later - Did you find the cause of the problem? Because right now I have the same problem. Chrome dev tools tells me the source is in file1.scss line 200, but it's actually in file2.scss line 100... Changing the options in gruntfile.js does not seem to change anything. — henk, Jun 15 '16 at 09:24

Sourcemap wrong filename

0 Answers0