0

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.

mixalbl4
  • 3,507
  • 1
  • 30
  • 44
  • @Rob I havent fount solution but if you ask about map in base64 you can read mo there: https://github.com/thlorenz/inline-source-map – mixalbl4 Jun 29 '17 at 12:50

1 Answers1

0

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.

mixalbl4
  • 3,507
  • 1
  • 30
  • 44