Jamie Hutber Jamie Hutber - 6 months ago 122
Node.js Question

Sourcemaps with webpack css-loader

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

Output in console:

enter image description here

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