Sourcemaps from webpack & mini-css-extract-plugin have slightly different directory structure

[webpack-bot]

Bug report

What is the current behavior?
In webpack 5 w/ mini-css-extract-plugin and config devtool: 'source-map', chrome groups css and js in different directories:

Here's the relevant snippet from the sourceMap files:
main.17fbf8.css.map: "sources":["webpack://main/src/main.scss"]
main.9c5261.js.map: "sources":["webpack://main/./src/main.js"...

full webpack config

It's annoying to have my files show separately in chrome, but I don't know which directory structure is more 'correct'. So, potentially, this is an issue for mini-css-extract-plugin.

Other relevant information:
webpack version: 5.3.2
Node.js version: v14.13.1
Operating System: OS X 10.15.7

---

This issue was moved from webpack/webpack#11910 by @evilebottnawi. Original issue was by @isaacl.