Instructions regarding source maps are incorrect

[WishCow]

The README says that you have to use the extract-text-webpack-plugin to get source maps working, however that is not entirely correct. You can get it working that way, but that will make it impossible to get livereload (or hmr) working.

After following the conversion in a closed ticket webpack-contrib/extract-text-webpack-plugin/issues/30, @sokra said that the extract-text plugin is not supposed to be used in development. If you want to get sourcemaps working, you just have to add ?sourceMap to both the css loader, and the scss loader, like this:

{
  test: /\.scss$/,
  loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
}

This will allow both live reloading, and sourcemaps to work, without involving the extract-text plugin at all. It does have a bit of a weird file name in Chrome, but clicking on it takes you to the correct file and line number. From my rudimentary testing, the value of the "devtool" flag doesn't seem to effect the generated sourcemaps at all, it works for me with both "eval", "source-map".

[yantakus]

When I use autoprefixer-loader it produces even more weird source path:

Here is my webpack config:

var AUTOPREFIXER_BROWSERS = '"ie >= 10","ie_mob >= 10","ff >= 30","chrome >= 34","safari >= 7","opera >= 23","ios >= 7","android >= 4.4","bb >= 10"';

loaders: [
  "style-loader",
  "css-loader?sourceMap",
  "autoprefixer-loader?{browsers:[" + AUTOPREFIXER_BROWSERS + "]}",
  "sass-loader?sourceMap"
]

[yantakus]

@jhnns, could you please explain what did you change to resolve the issue with source maps paths?

[jhnns]

The weird paths are created by the css-loader. Take a look at my PR for further information.

[yantakus]

@jhnns, your link points to 404 page.

[jhnns]

webpack-contrib/css-loader#154

[yantakus]

Thank you, it works perfectly for me!