如何在Vite中将CSS提取为独立的.css文件？

Vite 默认会将 CSS 注入到 JS 文件中运行时加载，要实现和你 Webpack 配置一致的「单独生成JS、CSS文件」效果，不需要额外安装插件，通过 Vite 内置的配置即可完成：

核心配置步骤 #

• 确保开启 CSS 代码分割（Vite 生产环境默认已开启，显式声明更清晰）
• 自定义输出路径与文件名，匹配你需要的目录结构

完整配置示例（以 Vue 项目为例，其他框架类似） #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    // 开启CSS代码分割，将CSS从JS中提取为独立文件
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        // 指定JS文件的输出路径和命名
        entryFileNames: 'assets/js/[name].js',
        // 指定CSS（以及其他静态资源）的输出路径和命名
        // 如果你想固定CSS文件名为styles.css，可改为 'assets/css/styles.css'
        assetFileNames: 'assets/css/[name].css'
      }
    }
  }
})

配置说明 #

• cssCodeSplit: true：这是实现分离的关键，Vite 会自动把每个入口对应的 CSS 提取为单独文件，单入口项目下就会生成一个独立的 CSS 文件
• assetFileNames：对应你 Webpack 配置中 MiniCssExtractPlugin 的 filename，可以自定义输出目录和文件名，支持 [name]、[hash] 等占位符
• 如果存在代码分割的场景，Vite 也会自动处理 chunk 对应的 CSS 文件，类似 Webpack 的 chunkFilename 效果

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