css not work corectly on vite lib mode

[shayan1998]

I want to create a new npm package and I have a problem with vite lib mode.
I want my package to export some UI components that has some styles, project works fine on yarn dev but when I build it the style.css file inside dist directory is not used anywhere, so the styles not applied to the components

this is my vite.config.ts file

import { resolve } from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [
    react(),
    dts({
      insertTypesEntry: true,
    }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, "src/main.tsx"),
      name: "MyLib",
      fileName: "my-lib",
    },
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },
  },
});

and this is dist folder :

I know I can import my styles separately like :

import Skeleton from "skeleton-sh";
import "skeleton-sh/style";

but I want is to just import package like import Skeleton from "skeleton-sh"; and its import the styles for me

[ArnaudBarre]

That's not related to this package.

And that's common for non CSS in js component library to says to users that they should have both imports. Not a big deal IMO, and better than hiding it. This allow users to better manage how and in which order they bundle their CSS.

[shayan1998]

thanks @ArnaudBarre
Do you mean if I want to hide my CSS imports I must use a CSS in JS library like styled-components or JSS or ...
and there is no other way?

[ArnaudBarre]

Choosing your CSS technology just to remove one import is not a good idea.
Just keep doing simple CSS + JS output, and tell users to import both.

That's not an issue to get 10k stars for example: https://github.com/fkhadra/react-toastify