基于Vite构建React组件库：样式拆分与按需注入方案咨询

问题说明 #

我正在用Vite重构组件库的构建流程，遇到了样式被打包成单个style.css的问题，带来两个麻烦：

• 把包安装到其他项目后，导入组件时style.css不会自动引入；
• 会把没用到的组件样式也一起导入。

之前的配置支持样式注入（CSS直接注入到组件里实现拆分），想知道Vite能不能实现同样的效果。

当前的构建配置如下：

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

export default defineConfig({
  plugins: [react(), dts()],
  resolve: {
    alias: {
      "@": "/src"
    }
  },
  build: {
    outDir: "dist",
    lib: {
      entry: "src/index.ts",
      name: "lib",
      fileName: format => `lib.${format}.js`
    },
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM"
        }
      }
    },
    sourcemap: true
  },
  css: {
    modules: {
      generateScopedName: "[name]__[local]___[hash:base64:5]"
    }
  }
});

最终的dist文件夹结构（已排除所有.d.ts文件）：

生成的style.css体积很大，不是我想要的结果，求解决办法。

解决方案 #

1. 修改Rollup配置，开启CSS拆分 #

在build配置里开启cssCodeSplit，同时调整资产文件名规则，避免所有CSS打包成一个文件：

export default defineConfig({
  // ...原有其他配置保持不变
  build: {
    outDir: "dist",
    lib: {
      entry: "src/index.ts",
      name: "lib",
      fileName: format => `lib.${format}.js`
    },
    cssCodeSplit: true, // 核心：开启CSS代码拆分
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM"
        },
        // 给每个CSS文件单独命名，避免统一生成style.css
        assetFileNames: (assetInfo) => {
          if (assetInfo.name?.endsWith('.css')) {
            return '[name].[hash].css';
          }
          return 'asset.[hash][extname]';
        },
        manualChunks: undefined // 禁用自动分块，确保组件与样式对应关联
      },
      cssCodeSplit: true // 明确开启Rollup的CSS拆分逻辑
    },
    sourcemap: true
  },
  // ...原有css配置保持不变
});

2. 每个组件单独引入自身样式 #

在每个组件的TS/TSX文件里直接导入对应的CSS文件，比如Button组件：

// src/components/Button/index.tsx
import './Button.css';

export const Button = () => {
  // 组件代码逻辑
};

这样打包时，Rollup会把每个组件的CSS和JS绑定在一起，要么把样式内联到JS中（运行时自动创建style标签注入页面），要么单独拆出对应组件的CSS文件，用户导入组件时样式会自动被加载。

3. 切换为多入口打包（推荐） #

如果你的组件库是多组件独立导出的，建议把库入口改成多入口，让每个组件单独打包成对应的JS和CSS文件：

build: {
  outDir: "dist",
  lib: {
    // 配置多入口，每个组件对应一个入口文件
    entry: {
      Button: 'src/components/Button/index.ts',
      Input: 'src/components/Input/index.ts',
      // 其他组件依次添加
    },
    name: "lib",
    fileName: (format, entryName) => `${entryName}.${format}.js`
  },
  cssCodeSplit: true,
  rollupOptions: {
    // ...原有rollup配置保持不变
  },
  sourcemap: true
}

打包完成后，dist文件夹里会生成每个组件对应的JS和CSS文件，用户可以通过import { Button } from 'your-lib/Button'按需导入单个组件，只会加载该组件的代码和样式，不会引入未使用的组件样式。

关键注意点 #

• cssCodeSplit: true是实现样式拆分的核心配置，必须开启，否则所有CSS还是会被打包成单个文件；
• 组件内部必须手动导入自身的CSS文件，否则样式无法与组件绑定；
• 多入口配置是实现组件库按需加载的关键，适合大多数组件库的使用场景。

内容的提问来源于stack exchange，提问作者Daniel V.