Search code examples
cssgoogle-chromewebpacksasssource-maps

Css sourceMappingURL doesnt work correct in Chrome 59.0.3071.115

I have a project that is packaged via webpack. Css is generated from sass with sourceMap.

    devtool: 'source-map',
...
    loader: ExtractTextPlugin.extract(
      'css-loader?sourceMap=true&minimize=true!' +
      'postcss-loader?sourceMap=true!' +
      'sass-loader?sourceMap=true'
    ),

app.css.map file successfully generated and sourceMappingURL=app.css.map placed in app.css. I see that Chrome recognized .map file in "source tab" because "webpack://" structure exists.

Chrome recognized .map file

But debugger does not used this .map for css:

[But debugger does not used this .map for css[2]

After that I convert app.css.map file to base64 (via online service) and paste it into app.css

sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJz...

and all works fine!

all works fine

Totally:

  1. .map is correct (because it works in base64 format)
  2. Chrome detects app.css.map and get it successfully (because webpack:// exists in source tab)

Why it doesnt work with "map in app.css.map" but same map works when it in base64 format? How to fix it?

---- UPD 1 ----

I've tested in other PC with same chrome and all works fine. I think some chrome settigns make this bug.

Solution

  • This is a bug of the latest versions of chrome with Live SASS option.

    I've sended bug report about it. Turn off live sass is temporary solution.

    How to enable/disable it.