I have a module main.ts that calls import './style.css' at the top. This is transpiled to the same import statement in the ES6 emitted by Typescript. I'm running Webpack w/ style-loader on the JS output. This works fine and builds the CSS into the final dist/main.js output.

However, this means that my src/ JS is now broken, as it has this import call at the top. Specifically, when I want to run out of src/ I get this:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

I don't really want Webpack to be a necessary step in development, only when I deploy. It seems Webpack would follow the linkage if I used require.js, but I'd like to do this without resorting to require(). Is there some kind of meta-syntax or commenting I can use - or forced inclusions in webpack.config.js - to make Webpack include the CSS and let Javascript engines ignore it?

One thing I tried that does work is try { require(['style.css']); } catch (e) {} instead of the import. That way I don't actually need require. It just seems pretty silly.