I'm fairly new to Vite, and I may have missed something explaining this.

My project is set up like this:

|- website
  |- index.html
  |- src
    |- index.js
    |- style.css
    |- components
      |- shared-styles
        |- shared.css
      |- test-component
        |- index.html
        |- index.js
        |- style.css

It's all vanilla, and I'm not currently using a vite.config.js file, though I will obviously add one, if necessary.

The issue centers on shared.css, which contains a few classes that will be shared among several components. It's included in the project through an @import in test-component/style.css:

@import "../shared-styles/shared.css"

/* the rest of the CSS for test-component */

And that file is imported in test-component/index.js:

import css from './style.css'

// later...

shadowRoot.innerHTML = `${html}`

The error I get is:

The stylesheet http://127.0.0.1:5173/shared-styles/shared.css was not loaded because its MIME type, “text/html”, is not “text/css”.

I see in the network tab that it's loading the file. It seems to be the reference that's broken. I tried changing it to:

@import "/shared-styles/shared.css"

But the error remains.

I see that if Vite can't find a file, it will default to index.html, which must be why the MIME type is incorrect. But that doesn't explain why the network tab says the resource is loading, yet I can't reference it.

Is my reference still somehow wrong? Should I be importing the shared style in index.js instead, and just concatenating them? Will Vite still simplify the styles so I don't get copies of shared.css for each of the components that use it? (I know that's more than one question, but I'm considering all angles. As long as I can get the reference corrected, I'll be happy.)