DevTools failed to link network resource to filesystem.

Platform: Linux
From chrome://version:
  - Chromium: 67.0.3396.99 (Official Build) Built on Ubuntu, running on Ubuntu
    18.04 (64-bit)
  - Revision: 8ef023c8bf48f152812e2068fc21827bc5503917-
  - JavaScript: V8 6.7.288.46
  - Flash: (Disabled)
  - User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like
    Gecko) Ubuntu Chromium/67.0.3396.99 Chrome/67.0.3396.99 Safari/537.36
  - Command Line: /usr/lib/chromium-browser/chromium-browser --enable-pinch
    --flag-switches-begin --flag-switches-end
  - Executable Path: /usr/lib/chromium-browser/chromium-browser

What are the details of your project?
- Build System: webpack
- HTTP server: webpack-dev-server (node express)

I'm using webpack to bundle resources into build/ (see tree below). Several JS
files are merged but CSS is untouched. In src/index.js I track the CSS file
using `import index.css` which emits it to the build folder. An HTML file is
produced (via HTMLWebpackPlugin) with a script tag to index.js and a link tag to
index.css in the build folder (i.e href="./index.css")

project/
 ├── build/
 │    ├── bundleAnalysis.html (unrelated)
 │    ├── stats.json (unrelated)
 │    │...
 │    ├── index.css
 │    ├── index.html
 │    └── index.js
 ├── src/
 │    ├── components/
 │    │    └── ...
 │    ├── index.css
 │    ├── index.ejs
 │    └── index.js
 └── webpack.config.js

Because I don't change (minify/optimize/prefix) the CSS in any way during
developement, src/index.css and build/index.css are the same:

sha1sum f28d29fecd73edede4809dc38b2d5093c88c060f build/index.css
sha1sum f28d29fecd73edede4809dc38b2d5093c88c060f src/index.css

With that it mind, I was hoping to add src/ to DevTools workspace and have it
link index.css (I don't expect it to map any other files). It doesn't pick it
up. I can open but the network and filesystem versions in tabs in the sources
panel and see they are identical, but there's no way to manually tell DevTools
to link them.

It's not clear what factors play into Chromium's decision to link resources.

I thought maybe the lack of HTML file in src/ was an issue? If I add build/
instead of src/ it works. However, I don't want to save to the build folder -
it's a temporary folder that's frequently overwritten. If I make a symlink from
build/index.css to src/index.css DevTools doesn't show index.css symlink in the
workspace.

I trying excluding the components/ folder from DevTools, but no change.

I don't want to say it's the "src/" part of the path, because hovering over each
file in DevTools shows:

- http://0.0.0.0:8080/index.css
- file:///home/me/a/b/c/d/project/src/index.css

I don't understand why /home/me/a/b/c/d/project/src/index.css is not working but
/home/me/a/b/c/d/project/build/index.css is... Could you let me know what I'm
missing?

Read through https://developers.google.com/web/tools/chrome-devtools/workspaces/

Also, is there a reason to not provide an option to manually link two files? Or
at least have DevTools log what it tried to do and why files didn't match like
"Hashes don't match, skipping".

In other projects I've had a great development workflow with:

project/
 ├── build/
 │    ├── bundleAnalysis.html (unrelated)
 │    ├── stats.json (unrelated)
 │    └── index.js
 ├── src/
 │    ├── components/
 │    │    └── ...
 │    └── index.js
 ├── index.css
 ├── index.html
 └── webpack.config.js

Where the HTML is written by hand with <script src="build/index.js"> and
<link href="index.css">. This means JS can be hot pushed/reloaded in my editor
and CSS can be styled in DevTools and persist reloads - perfect! Unfortunately
in this project webpack can't ignore HTML/CSS - it tracks all assets because a
production build needs to minify/optimize/prefix and actually even inline all
files into one HTML file (for signed URL Amazon S3 reasons)

Thank you for any help or suggestions.

Grant