रिएक्ट सीएसएस मॉड्यूल के लिए काम कर रहे स्रोतमैप कैसे प्राप्त करें?

Question

मैं react-css-modules, webpack और Hot Module Replacement के साथ एक प्रतिक्रिया प्रोजेक्ट सेट करने का प्रयास कर रहा हूं। सब कुछ एक आकर्षण की तरह काम कर रहा है लेकिन मुझे काम करने के लिए सीएसएस स्रोत नहीं मिल सकता है।

मैंने एचएमआर काम करने के लिए this guide का पालन किया। Webpack डिस्क पर लिखने के बाद इसमें css फ़ाइल को अपडेट करने के लिए ब्राउज़र Sync सेटअप शामिल है।

ExtractTextPlugin (के रूप में प्रतिक्रिया-सीएसएस-मॉड्यूल ने सुझाव दिया) मैं का उपयोग सीएसएस के सभी निकालने के लिए:

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

लेकिन अगर मैं sourcemaps को यह बदलने के लिए, के रूप में सुझाव here

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

मुझे त्रुटि मिलती है: "root" CSS module is undefined. मेरे ब्राउज़र कंसोल में।

आप मेरा उदाहरण रेपो here पा सकते हैं, लेकिन यहां पूर्ण वेबपैक कॉन्फ़िगरेशन है जिसका उपयोग मैं विकास के लिए कर रहा हूं।

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

स्रोतमैप कैसे काम करें?

Answer 1

इस का उपयोग करें:

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

अर्थात दोनों css & sass लोडर में जोड़ने sourceMap परम। यह sass-loader docs में ऐसा कहा।

Answer 2

यह कैसे मैं अपने सीएसएस मॉड्यूल की स्थापना की है है:

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