Wie bekomme ich Quellmaps für React Css Module?

Question

Ich versuche ein React-Projekt mit react-css-modules, webpack und Hot Module Replacement einzurichten. Alles funktioniert wie ein Zauber, aber ich kann die CSS-Quellkarten nicht zum Laufen bringen.

Ich folgte this guide, um HMR arbeiten zu lassen. Es beinhaltet ein BrowserSync-Setup, um die CSS-Datei zu aktualisieren, nachdem Webpack sie auf die Festplatte geschrieben hat.

ich (wie durch reagieren-CSS-Module vorgeschlagen), um die ExtractTextPlugin alle CSS zu extrahieren:

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

Aber wenn ich ändern, um dies zu sourcemaps, schlug als here

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

Ich bekomme den Fehler: "root" CSS module is undefined. in meiner Browser-Konsole.

Sie können mein Beispiel Repo here finden, aber hier ist die vollständige Webpack-Konfiguration, die ich für die Entwicklung verwenden.

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'] 
    } 
}; 

Wie funktioniert die Quellkarte?

Answer 1

verwenden:

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

heißt fügen Sie den sourceMap param auf beide css & sass Lader. So hieß es in sass-loader docs.

Answer 2

Dies ist, wie ich meine CSS-Module eingerichtet haben:

'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!',