Kaynak modülleri React Css Modülleri için nasıl çalışır?

Question

react-css-modules, webpack ve Hot Module Replacement ile bir Yanıtlama projesi kurmaya çalışıyorum. Her şey bir çekicilik gibi çalışıyor ama CSS sourcemaps'ın çalışmasını sağlayamıyorum.

HMR'yi çalışmak için this guide'u takip ettim. Webpack diske yazdıktan sonra css dosyasını güncelleştirmek için bir BrowserSync kurulumunu içerir.

ExtractTextPlugin (-tepki css-modül tarafından önerildiği gibi) Ben css tüm ayıklamak için kullanın:

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

Ama önerdiği gibi, sourcemaps bu değiştirirseniz here

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

Tarayıcı konsolumda şu hatayı alıyorum: "root" CSS module is undefined..

Örnek repoum here'u bulabilirsiniz, ancak geliştirme için kullanacağım tam web paketi yapılandırması.

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

Sourcemap nasıl çalışır?

Answer 1

bunu kullanın:

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

yani hem css & sass yükleyiciler için sourceMap param ekleyin. sass-loader docs'da öyle söyledi.

Answer 2

Bu benim css modülleri kurdunuz nasıl:

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