Reactjs 如何让sourcemaps为React Css模块工作？

我正在尝试设置一个React项目，和。一切都很顺利，但我无法让CSS sourcemaps正常工作

我遵循这一原则，使HMR发挥作用。它包括一个BrowserSync设置，在Webpack将css文件写入磁盘后更新该文件

我使用（react css模块建议的）

ExtractTextPlugin

来提取所有css：

{
测试：/\.scss$/,，
加载器：ExtractTextPlugin.extract（'style'，'css？模块和importLoaders=1&localIdentName=[name]\uuuuuuuu[local]\uuuuuuuu[hash:base64:5]！sass'）
}

但如果我按照建议将其更改为sourcemaps

loader:ExtractTextPlugin.extract（'style'，'css？sourceMap！sass loader outputStyle=expanded&sourceMap=true&sourceMapContents=true'））

我得到错误：

“root”CSS模块未定义。

在我的浏览器控制台中

您可以找到我的示例repo，但这里是我用于开发的完整网页配置

var webpack=require（'webpack'）；
var path=require（'path'）；
var ExtractTextPlugin=require（'extract-text-webpack-plugin'）；
var WriteFilePlugin=require（'write-file-webpack-plugin'）。默认值；
module.exports={
条目：{
捆绑：[
“webpack/hot/dev服务器”，
“Web包热中间件/客户端”，
“./index.js”
]
},
devtool:“廉价模块源映射”，
是的，
devServer:devServer，
上下文：path.resolve（uu dirname，'./src'），
输出：{
path:path.resolve（uu dirname，'./builds'），
文件名：'[name].js'，
publicPath:“/builds/”
},
插件：[
新建webpack.HotModuleReplacementPlugin（），
新网页包。OldWatchingPlugin（），
新建WriteFilePlugin（），
新的ExtractTextPlugin（'[name].css'{
allChunks：对
})
],
模块：{
装载机：[
{
测试：/\.js$/,，
加载器：['react-hot'，'babel loader']，
排除：/node\u模块/
},
{
测试：/\.scss$/,，
加载器：ExtractTextPlugin.extract（'style'，'css？模块和importLoaders=1&localIdentName=[name]\uuuuuuuu[local]\uuuuuuuu[hash:base64:5]！sass'）
}
]
},
决心：{
扩展名：[''，'.js'，'.json']
}
};

---

如何使sourcemap工作？

这是我设置css模块的方式：

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

使用以下命令：

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

---

i、 e.将

sourceMap

参数添加到

css

和

sass

加载程序。它是这么说的。

听起来可能有点傻，但这个呢

ExtractTextPlugin.extract（'style'，'css？sourceMap&modules&importLoaders=1&localdentname=[name]\uuuuuu[local]\uuuuuu[hash:base64:5]！sass？sourceMap'）

$@\u35;和$me。。这确实有效。我发誓我已经试过了。。。尽管如此，还是非常感谢。你能不能加上这个作为回答，这样我就可以奖励你奖金了？还添加了一些文档。：）奇怪的它仅适用于

css

上的

sourceMap

，并且在末尾不使用

sass

上的参数。没有道理…根据文件。补充了一个答案。很高兴这有帮助。：）只要您不使用react css模块或不需要热重新加载这些模块，这将起作用。在这些情况下，您需要ExtractTextPlugin。@Tieme这不是真的。我为散布这种误解道歉。我更新了文档（）并更新了相关主题的讨论线程（）。谢谢！没问题：）