React项目怎样优雅在浏览器中调试

有一个很小的React项目，这是项目目录：

项目引入了第三方样式库Semantic-ui，同时也用了CSS Modules来自定义一些样式。故webpack.config.js配置如下：

{test: /\.css$/,  loader: 'style!css'}, 
{test: /\.scss$/, loader: 'style!css?modules&localIdentName=[name]__[local]!sass?sourceMap=true'},

打包入口文件entry.js是这么引入semantic-ui的：

import './../node_modules/semantic-ui/dist/semantic.css';

项目里其中一个组件CommentBox.js是这么引入自定义的scss的：

import styles from './../css/style.scss'

然后style.css随便写几个样式，启动项目，浏览器测试正常。
问题来了，用chrome浏览器来调式传统的css的时候，浏览器会告诉你这句样式定义在了哪个css文件的哪一行，(调式scss时因为有sourceMap，也是告诉你对应的scss在哪个文件哪一行)但是react项目的css调试的时候都生成到里了，如果样式很多的话这该怎么优雅的调试？

这样的项目结构有问题吗？