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:

SourceMaps

To include SourceMaps set the sourceMap query param.

require("css-loader?sourceMap!./file.css")

My webpack.config

var webpack = require('webpack')  module.exports = {   entry: './src/client/js/App.js',    output: {     path: './public',     filename: 'bundle.js',     publicPath: '/'   },    plugins: process.env.NODE_ENV === 'production' ? [     new webpack.optimize.DedupePlugin(),     new webpack.optimize.OccurrenceOrderPlugin(),     new webpack.optimize.UglifyJsPlugin()   ] : [],    module: {     loaders: [       { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },       { test: /\.scss$/, loaders: ['style', 'css', 'sass']},       { test: /\.css$/, loader: "style-loader!css-loader?sourceMap!./file.css" },       { test: /\.png$/, loader: "url-loader?limit=100000" },       { test: /\.jpg$/, loader: "file-loader" }     ]   } } 

How i include the sass

import React from 'react' import { render } from 'react-dom' import { Router, browserHistory } from 'react-router' import routes from './routes' import '../scss/main.scss'  render(   <Router routes={routes} history={browserHistory}/>,   document.getElementById('app') ) 

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') ] ...