如何在Vite中将CSS打包至单个JS文件，适配single-spa微前端使用场景

方案1：纯原生Vite配置实现（无需额外依赖） #

直接修改vite.config.js中的打包相关配置即可：

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

export default defineConfig({
  plugins: [
    vue(),
    singleSpa({
      // 保留你原有single-spa插件配置
    })
  ],
  build: {
    cssCodeSplit: false,
    rollupOptions: {
      output: {
        manualChunks: undefined,
        inlineDynamicImports: true,
        assetFileNames: (asset) => {
          // 过滤CSS资源，强制不输出独立CSS文件
          if (asset.name.endsWith('.css')) {
            return '[name].js'
          }
          return 'assets/[name]-[hash][extname]'
        }
      }
    }
  }
})

该方案适合样式逻辑简单的小型项目，无需引入额外依赖，配置后打包只会生成一个可被single-spa直接加载的JS文件。

方案2：使用专门插件实现（推荐，生产环境兼容性更好） #

通过vite-plugin-css-injected-by-js插件实现自动CSS内联，会自动将所有样式转为运行时注入逻辑，对原有业务代码零侵入，兼容性更强：

1. 安装开发依赖
   npm install vite-plugin-css-injected-by-js --save-dev

2. 修改vite.config.js引入插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import singleSpa from 'vite-plugin-single-spa'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

export default defineConfig({
  plugins: [
    vue(),
    singleSpa({
      // 保留你原有single-spa插件配置
    }),
    // 加入该插件即可，无特殊需求不需要额外传参
    cssInjectedByJsPlugin({
      // 可选配置：给注入的style标签加唯一ID，方便应用卸载时清理样式避免泄漏
      styleId: 'micro-app-your-app-name-style'
    })
  ],
  // 原有其他配置完全保留即可
})

如果需要在微应用卸载时清理注入的样式，可以在你的single-spa应用的unmount生命周期钩子中加入清理逻辑：

export const unmount = async () => {
  // 原有卸载逻辑
  const styleEl = document.getElementById('micro-app-your-app-name-style')
  if (styleEl) styleEl.remove()
}

该方案支持所有CSS相关场景，包括scss/less预处理器样式、第三方依赖样式、Vue单文件组件样式，不会出现原生配置可能导致的样式丢失问题，更适合中大型生产项目使用。

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