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

[243riefsldjf]

Hello friends. I'm new to Vite and I'm hoping someone can help me with this.

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!

[linutis-mzk]

Doing

import 'mycomponent/dist/style.css'

seems a bit silly to me as well, considering the goal is to export a self sufficient component. I imagine you could import 'style.css' inside the built .js file, then if someone installs the package they should have the styling. It feels like a very clinical idea, so I imagine there must be a better way to bundle it with Vite, rather than using some odd packages. I think rollupOptions should have a setting for bundling css with an individual file. But, so far I've seen very similar solutions to what you're describing.

[mitya33]

Thanks for this. Yeah it did occur to me that you could just import the component's CSS from within the style tag of a SFC. I just never imagined you'd have to; obviously, there's different ways to build Vue extensions, but any time I've used a third-party one, if I've imported the component, it also brings the component's CSS with it, too, I've never had to import that separately.

Anyway, appreciate the reply.