如何在Vite中为每个入口文件生成独立的CSS文件

要让Vite为每个入口文件生成对应的独立CSS文件，需调整Vite配置的build.rollupOptions项，并规范入口的定义方式，具体如下：

修改后的完整配置示例：

import { resolve } from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      // 把入口从数组改为键值对形式，明确每个入口的名称
      entry: {
        entry1: resolve(__dirname, 'src/entry1.ts'),
        entry2: resolve(__dirname, 'src/entry2.ts'),
      },
      name: 'LibraryName',
      fileName: '[name]',
    },
    rollupOptions: {
      output: {
        // 指定资源文件命名规则，让CSS文件名和对应入口名绑定
        assetFileNames: '[name].[ext]',
        // 禁用自动拆分chunk，确保每个入口的资源完全独立
        manualChunks: undefined,
      },
    },
  },
});

关键要点： #

• 入口定义改为对象形式：替代原数组写法，让Rollup能精准识别每个入口的标识，为后续资源匹配提供依据。
• 配置资源命名规则：通过assetFileNames: '[name].[ext]'，Vite会根据入口名称生成对应CSS文件（如entry1.css、entry2.css）。
• 确保样式独立引入：每个入口文件（如entry1.ts）需单独引入自身对应的样式文件，或保证入口关联的组件样式无交叉复用，避免样式被合并。

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