Sourcemaps with webpack css-loader

Question

I am struggling to get sourcemaps working with css-loader.

Output in console:

What the documentation from css-loader says:

Sourc

Answer 1

1. Enable source-maps via webpack

   ...
   devtool: 'source-map'
   ...
   

2. You might want to enable source-maps for Sass-Files as well

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

3. Use extract text plugin to extract your css into a file.

   ...
   plugins: [
     ...
     new ExtractTextPlugin('file.css')
   ]
   ...
   

Answer 2

There are some properties you need to set in your webpack config.

{
   output: {
      ...
   },

   debug: true, // switches loaders into debug mode
   devtool: 'eval-cheap-module-source-map', // or one of the other flavors, not entirely sure if this is required for css source maps
   ...
}

The webpack dev server doesn't have debug on by default. Instead of setting it in your config, you can also pass the -d or --debug flag to webpack-dev-server via the CLI.