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

HaNdTriX · Accepted Answer · 2016-05-29 19:45:57Z

38

+50

Enable source-maps via webpack
```
...
devtool: 'source-map'
...
```

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"
      ]
    },
    ...
  ]
}

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

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

edited May 29, 2016 at 19:45

answered May 22, 2016 at 17:43

HaNdTriX

29.9k11 gold badges82 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jamie Hutber Over a year ago

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 Over a year ago

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 Over a year ago

I am upvoting your answer because the ?sourcemap params on the scss loader was what is needed. @D

Serg Hospodarets Over a year ago

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

van_folmert Over a year ago

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.

Thijs Koerselman · Accepted Answer · 2016-05-27 18:01:16Z

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.

answered May 27, 2016 at 18:01

Thijs Koerselman

23.4k25 gold badges85 silver badges122 bronze badges

2 Comments

Jamie Hutber Over a year ago

Sadly this doesn't change my outcome. It still displays the <style>...</style> inside the inspector

Thijs Koerselman Over a year ago

You're right I overlooked something. Source maps were switched on by my postcss configuration.

Collectives™ on Stack Overflow

Sourcemaps with webpack css-loader

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related