构建VITE应用时如何设置自定义CSS文件的导出名称？

结论 #

可以实现该需求，Vite 未提供直接配置CSS输出文件名的专属选项，但可通过原生Rollup配置或第三方插件完成自定义命名。

实现方法 #

方法1：原生Rollup配置（无需额外插件，适用所有场景） #

Vite 底层基于Rollup构建，可通过修改build.rollupOptions.output.assetFileNames配置项，对CSS类型的资源单独指定输出名称：

// vite.config.ts 示例
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    // 如果你使用库模式，保留你的原有lib配置即可
    lib: {
      entry: 'src/index.ts',
      name: 'YourLibName',
      fileName: 'your-lib-name'
    },
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          // 匹配CSS类型文件，自定义命名
          if (assetInfo.name.endsWith('.css')) {
            // 这里直接写你要的文件名，比如 application-name.css、my-site-name.css
            return 'assets/application-name.css'
          }
          // 其他类型静态资源保持默认输出规则
          return 'assets/[name]-[hash][extname]'
        }
      }
    },
    // 可选配置：如果遇到CSS被内联到JS中没有单独输出的情况，添加这行强制CSS单独打包
    assetsInlineLimit: 0
  }
})

方法2：使用第三方插件（适用于复杂拆分需求） #

如果你有多个入口需要输出多个自定义命名的CSS文件，可以使用对应社区插件，按入口路径对应自定义CSS文件名即可。

注意事项 #

• 不需要CSS文件名带哈希后缀的话，直接在返回的路径中去掉[hash]占位符即可
• 自定义路径可以按需调整，不需要存放在assets目录的话直接返回文件名即可，比如直接返回my-site-name.css就会输出在构建产物根目录

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