Importing a node module with a CSS entry point no longer works
Describe the bug
Importing a package like modern-normalize
now no longer works without suffixing ?import
manually
Suffixing ?import
treats the module as external in production builds.
System Info
vite
version: 0.14.3- Operating System: Arch Linux
- Node version: 14.2.0
Agreed, same thing for importing css through @import in the style section, just started looking through the code for the resolver to see what changed.
Originally we treated direct imports to .css
as a request to js code that inserts the css, and .css?raw
returns the actual css. However this requires us to be able to differentiate between .css
requests that are from JS vs. ones made by <link rel="...">
. Previously we checked the request's referer header to do that, which works in Chrome and FF, but breaks in Safari because Safari uses the page url instead of the script url as the referer for native ES module imports...
So the new approach rewrites js imports to css to .css?import
, but it now misses resolved bare modules and @import
inside css.
There are definitely ways to fix it, just explaining the change here.
understandable, though a little disappointed that safari is doing something different than the two major browsers 😃
import normalize.css
is also broken(https://github.com/necolas/normalize.css/), error msg: The server responded with a non-JavaScript MIME type of "text/css".
Both import normalize.css?raw
and import normalize.css?import
work well.