Webpack blob names for CSS modules

Question

I've set up webpack 2 with CSS modules, and it works. However, when I debug the CSS via the browser debugger, all the paths are like this: "blob:http://localhost:3000/2b5f9ab7-7972-4c8a-bdbd-96cd9e74b6f9"

This makes it impossible for me to identify the CSS modules. Is there some way I can get webpack to write out the module name instead?

Thanks in advance!

Answer 1

Maybe this can help you even though I don't think is the optimal solution.
Try with manifest revision plugin, what it does is to generate a manifest.json file, where there are all the references your project is using.
Add the plugin to webpack.config

new manifest('manifest.json', {
        rootAssetPath: '/public/css',
        ignorePaths: []
      })

Then in the manifest.json you will find the equivalences, this way you can know what file is using your project.

{
  "assets":
  {"./bootstrap.min.css":"e02a995e6786d8aa55ee397094f88d16.css"}
}