sass-loader: Invalid mapping: Negative column number

Google brought me here after searching for a solution for sass/libsass#2312 which is sadly locked so I can’t comment there but maybe this will help someone else:

Before: .parent { &:hover { color: red; } }

After: .parent { @at-root #{&}:hover { color: red; } }

Temp fix:

{
  test: /\.scss$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { sourceMap: true } },
    { loader: 'sass-loader', options: { sourceMap: false } },  // disable source map
  ]
}

At least we can see the original filename of CSS styles…

If the problem is related to sass, it is probably due to “compressed” outputStyle. I figured it out just change compressed to “compact”.

Here is what I just figured out as a workaround. The location where I had the error with column: -1 looked like this:

@mixin flexWithCols {
  display: flex;

  &__col {
    ... // more styles here
  }
}

The error appeared on the line with &__col { which is intended by 2 spaces. Now simply by changing the indentation to 4 spaces fixes the error:

@mixin flexWithCols {
  display: flex;

    &__col {
      ... // more styles here
    }
}

Confirmed, it is related to https://github.com/sass/libsass/issues/2312, need fix in node-sass

I’m having the same issue. If anyone’s interested I have a simpler case reproduced in this repo

One possible workaround is to use outputStyle: 'compact' instead of compressed

Hi @jhnns in my case the error seems to be extract-text-webpack-plugin in conjunction with the minimize setting from LoaderOptionsPlugin see my example repo: https://github.com/maggo/sass-loader-sourcemaps-bug

Ok, part of related webpack config is:

// ...
devtool: process.env.NODE_ENV === 'PRODUCTION' ? 'source-map' : 'inline-source-map',
// ...
{
     test: /\.scss$/, use: ExtractTextPlugin.extract({
     fallback: 'style-loader',
     use: [{
     loader: 'css-loader', options: {
          sourceMap: true
     }
}, {
     loader: 'postcss-loader',
     options: {
     sourceMap: true,
     plugins: function () {
          return [
               autoprefixer({
                    cascade: false,
                         browsers: ['last 2 versions']
                    })
               ];
          }
     }
}, {
     loader: 'sass-loader', options: {
          sourceMap: true,
          outputStyle: 'expanded',
          includePaths: [
               path.resolve(ROOT_PATH, 'node_modules/foundation-sites/scss')
          ]
     }
}]

I’m have just noticed that webpack without -p flag compiles styles nicely. This flag launch webpack’s Uglify plugin, as all known. And define process.env.NODE_ENV="production". But I by hand set this variable and remove flag -p and this says the problem is in UglifyJS but I dont know how it related to SCSS… and source maps

Stacktrace of error is repeated locally and on Heroku:

/home/mishelen/projects/nonameapp/node_modules/source-map/lib/source-map-generator.js:289
      throw new Error('Invalid mapping: ' + JSON.stringify({
      ^

Error: Invalid mapping: {"generated":{"line":1,"column":39305},"source":"/home/mishelen/projects/nonameapp/node_modules/foundation-sites/scss/forms/_text.scss","original":{"line":111,"column":-12},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (/home/mishelen/projects/nonameapp/node_modules/source-map/lib/source-map-generator.js:289:13)
    at SourceMapGenerator_addMapping [as addMapping] (/home/mishelen/projects/nonameapp/node_modules/source-map/lib/source-map-generator.js:101:12)
    at /home/mishelen/projects/nonameapp/node_modules/source-map/lib/source-node.js:351:13
    at SourceNode_walk [as walk] (/home/mishelen/projects/nonameapp/node_modules/source-map/lib/source-node.js:230:9)
    at SourceNode_walk [as walk] (/home/mishelen/projects/nonameapp/node_modules/source-map/lib/source-node.js:226:13)
    at SourceNode_walk [as walk] (/home/mishelen/projects/nonameapp/node_modules/source-map/lib/source-node.js:226:13)
    at SourceNode_toStringWithSourceMap [as toStringWithSourceMap] (/home/mishelen/projects/nonameapp/node_modules/source-map/lib/source-node.js:342:8)
    at ConcatSource.proto.sourceAndMap (/home/mishelen/projects/nonameapp/node_modules/webpack-sources/lib/SourceAndMapMixin.js:30:32)
    at getTaskForFile (/home/mishelen/projects/nonameapp/node_modules/webpack/lib/SourceMapDevToolPlugin.js:33:30)
    at chunk.files.forEach.file (/home/mishelen/projects/nonameapp/node_modules/webpack/lib/SourceMapDevToolPlugin.js:91:21)
    at Array.forEach (<anonymous>)
    at /home/mishelen/projects/nonameapp/node_modules/webpack/lib/SourceMapDevToolPlugin.js:89:18
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (/home/mishelen/projects/nonameapp/node_modules/webpack/lib/SourceMapDevToolPlugin.js:88:12)
    at Compilation.applyPlugins1 (/home/mishelen/projects/nonameapp/node_modules/tapable/lib/Tapable.js:75:14)
    at self.applyPluginsAsync.err (/home/mishelen/projects/nonameapp/node_modules/webpack/lib/Compilation.js:661:11)
    at next (/home/mishelen/projects/nonameapp/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.<anonymous> (/home/mishelen/projects/nonameapp/node_modules/uglifyjs-webpack-plugin/dist/index.js:244:6)
    at Compilation.applyPluginsAsyncSeries (/home/mishelen/projects/nonameapp/node_modules/tapable/lib/Tapable.js:206:13)
    at self.applyPluginsAsync.err (/home/mishelen/projects/nonameapp/node_modules/webpack/lib/Compilation.js:657:10)
    at next (/home/mishelen/projects/nonameapp/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.<anonymous> (/home/mishelen/projects/nonameapp/node_modules/extract-text-webpack-plugin/dist/index.js:272:11)
    at Compilation.applyPluginsAsyncSeries (/home/mishelen/projects/nonameapp/node_modules/tapable/lib/Tapable.js:206:13)
    at sealPart2 (/home/mishelen/projects/nonameapp/node_modules/webpack/lib/Compilation.js:653:9)
    at next (/home/mishelen/projects/nonameapp/node_modules/tapable/lib/Tapable.js:202:11)
    at /home/mishelen/projects/nonameapp/node_modules/extract-text-webpack-plugin/dist/index.js:241:13
    at /home/mishelen/projects/nonameapp/node_modules/async/dist/async.js:421:16
    at iteratorCallback (/home/mishelen/projects/nonameapp/node_modules/async/dist/async.js:998:13)
    at /home/mishelen/projects/nonameapp/node_modules/async/dist/async.js:906:16
    at /home/mishelen/projects/nonameapp/node_modules/extract-text-webpack-plugin/dist/index.js:224:15

@jhnns It’s pretty common. I’ve checked and I have error due to Foundation CSS mixins - they also have & in _mixins.scss - https://github.com/zurb/foundation-sites/blob/develop/scss/util/_mixins.scss.

@jcapozzi that’s the only solution that fixed my issue!

Many many many thanks!

Now I’m going to submit a PR to material-components-web

In my case value of column number is equal to length of mixin name. I use expanded outputStyle

"source":"/app/node_modules/foundation-sites/scss/forms/_text.scss",
"original":{"line":111,"column":-12},"name":null}

And that mixin:

@mixin form-element {
//....
  &:focus {}
}

May be it occasion)) But logically, what we do with sass placeholder? Replace! even with mixin name, isnt it)) Also name includes hyphen (negative, minus), Foundation seems to be loving hyphens in names))

It appears this may be related to https://github.com/sass/libsass/issues/2312

+1 Just ran into the same problem: with webpack 2 due to file foundation-si tes/scss/components/_button.scss from bower install (v.6.2.4):

Invalid mapping: {"generated":{"line":2828,"column":2},"source":"webpack:///bower_components/foundation-si tes/scss/components/_button.scss","original":{"line":155,"column":-10},"name":null}

Only “compressed” output triggered it, “compact” & “verbose” are working.

@albertogasparin awesome! This is a good starting point to locate the error. Unfortunately, I don’t have time for that now, but I would be glad if someone of you could tackle it.

Crazy, I’ve never seen mixins and & used together:

@mixin FormField {
  position: relative;
  display: flex;
  line-height: $Pollicino-FormField-height;

  &-label {     // <---- that's where the error is coming from