Shareable Vite/Vue component - why am I getting error about missing CSS export?

Question

I've been following this video to build a shareable Vue component via Vite, which I'm then testing by npm linking it into another project.

After building with Vite via npm run bulid and then linking, I end up with this structure in my other project's node_modules dir:

- mycomponent
    - dist
        - style.css
        - mycomponent.es.js
        - mycomponent.umd

I can successfully import my component - BUT it lacks CSS! So according to the above video I needed to do (in my main.js):

import MyComponent from 'mycomponent'
import 'mycomponent/dist/style.css'
...
const app = createApp(App)
    .use(...)
    .use(Mycomponent)

I don't really want it to be globally available in this way, but I'm just trying to fix the CSS issue. Anyway, this results in the following error:

[plugin:vite:import-analysis] Missing "./style.css" export in "mycomponent" package

What am I doing wrong? Given my component was built as a SFC, why do I even need to import its CSS separately? And the file /dist/style.css does exist.

Here's my component's package.json > exports, incidentally:

  "exports": {
    ".": {
      "import": "./dist/mycomponent.es.js",
      "require": "./dist/mycomponent.umd.js"
    },
    "./dist/style.css": "./dist/style.css"
  },

Thank you in advance!

Answer 1

Exports is a key/map which should be mirrored in the imports

Failed:

In my case I had...

"./style.css": "./dist/style.css"

and so got the OP error trying to import 'my-lib/dist/style.css'.

Solution:

Match the import to the key from exports, like

import 'my-lib/style.css'