12

I'm trying to setup a React project with react-css-modules, webpack and Hot Module Replacement. Everything is working like a charm but I can't get the CSS sourcemaps to work.

I followed this guide to make HMR work. It involves a BrowserSync setup to update the css file after Webpack writes it to disk.

I use (as suggested by react-css-modules) the ExtractTextPlugin to extract all of the css: 

{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
}

But if I change this to sourcemaps, as suggested here 

loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass-loader outputStyle=expanded&sourceMap=true&sourceMapContents=true')

I get the error: "root" CSS module is undefined. in my browser console.

You can find my example repo here, but here's the full webpack config I'm using for development. 

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WriteFilePlugin = require('write-file-webpack-plugin').default;

module.exports = {
  entry: {
    bundle: [
      'webpack/hot/dev-server',
      'webpack-hot-middleware/client',
      './index.js'
    ]
  },
  devtool: 'cheap-module-source-map',
  debug: true,
  devServer: devServer,
  context: path.resolve(__dirname, './src'),
  output: {
    path: path.resolve(__dirname, './builds'),
    filename: '[name].js',
    publicPath: '/builds/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.OldWatchingPlugin(),
    new WriteFilePlugin(),
    new ExtractTextPlugin('[name].css', {
      allChunks: true
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.json']
  }
};

How to make the sourcemap work?

Gajus
  • 69,002
  • 70
  • 275
  • 438
Tieme
  • 62,602
  • 20
  • 102
  • 156
  • Might sound silly, but what about this? `ExtractTextPlugin.extract('style','css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap')` – Louay Alakkad Dec 28 '15 at 12:44
  • $@##&$ me.. that is indeed working. I would swear I've tried that... Nevertheless thanks a lot. Could you maybe add this as an answer so I can reward you the bounty? – Tieme Dec 29 '15 at 16:48
  • Added some documentation as well. https://github.com/gajus/react-css-modules/pull/72 :) – Tieme Dec 29 '15 at 17:03
  • Weird.. it only works with `sourceMap` on `css` and without the parameter on `sass` at the end. Doesn't make sense... – Tieme Dec 29 '15 at 17:10
  • According to the docs [you need to pass both](https://github.com/jtangelder/sass-loader#source-maps). Added an answer. Glad it helped. :) – Louay Alakkad Dec 29 '15 at 19:20
  • Weird.. that both is not working for me... to be continued.. – Tieme Dec 30 '15 at 12:13

2 Answers2

8

Use this:

ExtractTextPlugin.extract('style','css?sourceMap&modules&importLoaders=1&localI‌​dentName=[name]__[local]___[hash:base64:5]!sass?sourceMap')

i.e. add the sourceMap param to both css & sass loaders. It said so in sass-loader docs.

Louay Alakkad
  • 7,132
  • 2
  • 22
  • 45
2

This is how I have my css modules set up:

'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!',
Emmanuel
  • 51
  • 1
  • 3
  • That will work as long as you don't use react-css-modules or don't need hot reloading of those modules. In those cases you need the ExtractTextPlugin. – Tieme Dec 29 '15 at 16:31
  • @Tieme Thats not true. I apologize for spreading this misconception. I updated the docs (https://github.com/gajus/react-css-modules#webpack) and updated the discussion thread on the related topic (https://github.com/gajus/react-css-modules/issues/51#issuecomment-181660058). – Gajus Feb 09 '16 at 01:39
  • Thanks! No problem :) – Tieme Feb 15 '16 at 13:20