22

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')
)
Jamie Hutber
  • 22,870
  • 34
  • 131
  • 236

2 Answers2

34

  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')
]
...
HaNdTriX
  • 25,034
  • 10
  • 72
  • 80
  • Sorry for the delay, I was away just when I needed to get this fixed :D. If I include the `css-loader?sourceMap` in the `sass` section i get the following error: `Refused to load the stylesheet 'blob:http%3A//localhost%3A4004/c220aee3-8b79-49f8-b487-022859dbef73' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".` I do wonder if I am using sass and the css module incorrectly – Jamie Hutber May 29 '16 at 11:36
  • Ok the above error as that was due to meta data security I had set, taken from an example. Now I set your example put and I have it showing me that it is from the file `main.scss` but sourcemaps are still not working as it doesn't show the line number or file name correctly. – Jamie Hutber May 29 '16 at 12:16
  • I am upvoting your answer because the `?sourcemap` params on the scss loader was what is needed. @D – Jamie Hutber May 29 '16 at 12:18
  • 2
    I'm just wondering, how to apply `devtool: 'eval'` for JS (for quicker dev debug) and enable source maps for the ExtractTextPlugin (without devtool: 'source-map' it doesn't work). – Serg Hospodarets Sep 28 '16 at 14:39
  • Webpack 1.13 here. Doesn't work for me - no css file is extracted. I had to put `ExtractTextPlugin.extract()` inside the loader and as parameter pass these css and sass loaders in array form. – van_folmert Nov 18 '16 at 15:58
0

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.

Thijs Koerselman
  • 16,219
  • 15
  • 62
  • 89