如何获取源映射为React Css模块工作？

我正在尝试使用react-css-modules，webpack和Hot Module Replacement设置React项目。一切工作都像一个魅力，但我无法让CSS源代码工作。我跟着this guide使HMR工作。它涉及一个BrowserSync安装程序，在Webpack将其写入磁盘后更新该css文件。如何获取源映射为React Css模块工作？

我使用ExtractTextPlugin（由反应-CSS-模块所建议的），以提取所有的CSS：

{ 
    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.。

你可以找到我的示例repo here，但这里是我用于开发的完整的webpack配置。

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

如何使源图工作？

来源

2015-12-23 Tieme

可能听起来很愚蠢，但这又如何呢？ 'ExtractTextPlugin.extract（'style'，'css？sourceMap＆modules＆importLoaders = 1＆localIdentName = [name] __ [local] ___ [hash：base64：5]！sass？sourceMap'）' – Louy

$ @ ##＆$ me ..的确工作。我会发誓我已经尝试过......尽管如此，非常感谢。你可以加这个作为答案，以便我可以奖励你的赏金？ – Tieme

也增加了一些文档。 https://github.com/gajus/react-css-modules/pull/72 :) – Tieme

使用此：

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

即sourceMap PARAM同时添加到css & sass装载机。它在sass-loader docs中这样说。

来源

2015-12-29 19:18:39 Louy

我这是怎么了我的CSS模块设置：

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

来源

2015-12-29 10:35:08 Emmanuel

这将工作，只要你不使用react-css模块或不需要热重新加载这些模块。在这些情况下，您需要ExtractTextPlugin。 – Tieme

@Tieme那是不正确的。我为传播这种误解而道歉。我更新了文档（https://github.com/gajus/react-css-modules#webpack）并更新了相关主题的讨论主题（https://github.com/gajus/react-css-modules/issues/51＃issuecomment-181660058）。 – Gajus

谢谢！没问题：） – Tieme

如何获取源映射为React Css模块工作？

回答

相关问题