Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

source maps are incorrect when compiling from SCSS

See original GitHub issue

I have this Gulp code which compiles three SCSS files (first.scss, last.scss, and app.scss). All plugins are gulp-sourcemaps compatible:

return gulp.src(cssFiles)
    .pipe(plugins.if(addSourceMaps, plugins.sourcemaps.init({loadMaps: true})))
    .pipe(plugins.sass())
    .pipe(plugins.autoprefixer())

    // I have verified this code is not the issue--if commented out the problem remains.
    .pipe(plugins.if(!!config.cssFile,plugins.order(
      [
        config.sourceFolder + '**/first.css',
        '!' + config.sourceFolder + '**/*',
        '!' + config.sourceFolder + '**/last.css'
      ],
      {base: '.'}
    )))

    .pipe(plugins.if(!!config.cssFile, plugins.concat(config.cssFile)))
    .pipe(plugins.if(addSourceMaps, plugins.sourcemaps.write('.', {sourceRoot: '../src'})))
    ...

When autoprefixer is commented out, the source maps are produced properly:

{"version":3,"sources":["sass/first.scss","sass/app.scss","sass/last.scss"],"names":[],"mappings":"AAAA;ACAA;ACAA","file":"all.css","sourcesContent":["// All CSS files are combined into one big file called \"all.css\". This file is\n// guaranteed to be the first file added (the contents of this file will be at\n// the beginning of \"all.css\").\n\n","// app.scss\n\n","// All CSS files are combined into one big file called \"all.css\". This file is\n// guaranteed to be the last file added (the contents of this file will be at\n// the end of \"all.css\").\n\n"],"sourceRoot":"../src"}

When autoprefixer is enabled, the source maps are incorrect and point to nonexistent CSS files:

{"version":3,"sources":["sass/app.css","sass/first.css","sass/last.css"],"names":[],"mappings":"AAAA;ACAA;ACAA","file":"all.css","sourceRoot":"../src","sourcesContent":[]}