Sourcemaps aren't working in dev mode

I see how it works now.

In dist mode, it's just setting the path from the manifest file.

In dev mode, convert the css to js with type: external and attributes: { type: module }. The js gets the same.

It's external because the url is on the node server, and type: module means that it's loaded as a js module in the browser.

My main.js is importing vite, devtools, and my css. In dev mode, the vite devtools inject the styles into the html and updates then when changes are made. That's why it's not just loading the css file.

I'm still having trouble with sourcemaps in my components, which just have css files. They are being included in the input with a glob:

      rollupOptions: {
        input: [
          './src/main.js',
          ...glob.sync('components/**/*.css'),

There's quite a lot to read up on for vite/rollup css options for anyone following along.
https://vitejs.dev/guide/features#css
https://vitejs.dev/guide/features#css-code-splitting
https://vitejs.dev/guide/features#glob-import

Here is an issue with vitejs that looks like the main blocker: https://github.com/vitejs/vite/issues/2830

I found a setting in firefox "Show Original Sources" that fixes it.

It's in the Style Editor tab, next to the filter.