Vite库模式下CSS样式不生效，如何实现自动引入样式？

我用Vite的Lib模式开发带样式的React UI组件npm包，yarn dev运行正常，但构建后dist目录里的style.css没被自动引用，导致组件样式不生效。

我的vite.config.ts配置如下：

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",
        },
      },
    },
  },
});

dist目录结构：

我知道可以手动单独导入样式：

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

但我希望只通过import Skeleton from "skeleton-sh";就能自动引入组件样式。

解决方案1：将样式内联到组件JS文件中 #

修改vite.config.ts，配置CSS输出内联，并启用Rollup的内联动态导入，让样式直接打包进组件JS：

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,
    }),
  ],
  css: {
    output: {
      // 把样式内联到JS文件中
      inline: 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",
        },
        // 启用内联动态导入，确保样式被包含进主组件文件
        inlineDynamicImports: true,
      },
    },
  },
});

重新构建后，用户导入组件时样式会自动生效，无需额外引入。

解决方案2：在入口文件导入样式并配置package.json #

如果不想内联样式，可通过以下步骤实现自动引入：

1. 在组件入口文件src/main.tsx中直接导入样式文件：

// src/main.tsx
import "./path/to/your/styles.css"; // 替换为你的样式文件路径
export { default as Skeleton } from "./components/Skeleton";
// 导出其他组件...

2. 调整package.json的字段，确保构建产物被正确识别：

{
  "name": "skeleton-sh",
  "main": "./dist/my-lib.umd.js",
  "module": "./dist/my-lib.es.js",
  "types": "./dist/my-lib.d.ts",
  "files": ["dist"]
}

重新构建后，用户导入组件时，JS文件会自动触发样式的导入逻辑。

内容的提问来源于stack exchange，提问作者shayan