Vite生产构建时styled-components类名被替换为jss格式，如何保留自定义类名？

嘿，我太懂你这种糟心的感觉了——生产构建完，styled-components把好好的自定义类名都换成了jss开头的随机串，QA的自动化测试直接卡壳，之前用Webpack的时候完全没这事儿对吧？别慌，你之前试的那些方法（CSS Modules配置、esbuild.keepnames、改mode）没用，是因为没找对styled-components的专属配置方式，给你一步步说怎么解决：

核心方案：用styled-components官方Babel插件控制类名 #

styled-components的类名生成逻辑是靠自身的Babel插件来管控的，Vite默认的配置不会处理这部分，所以得手动配置这个插件：

1. 先安装依赖 #

首先得装styled-components官方的Babel插件，打开终端跑这个命令：

npm install babel-plugin-styled-components --save-dev

2. 配置Vite的React插件 #

在你的vite.config.js里，修改React插件的配置，把Babel插件加进去，还可以自定义类名的生成规则，完全满足你要的my-custom-class-213这种格式：

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

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              // 开启后会保留组件名作为类名前缀
              displayName: true,
              // 可选：保留文件名，方便定位组件
              fileName: true,
              // 自定义类名生成规则，完全按你想要的来
              classNameGenerator: (componentName) => {
                // 比如你要的 原组件名-随机数 格式
                return `${componentName}-${Math.floor(Math.random() * 1000)}`;
                // 如果你想固定用自定义前缀，也可以直接写死：
                // return `my-custom-class-${Math.floor(Math.random() * 1000)}`;
              }
            }
          ]
        ]
      }
    })
  ],
  build: {
    // 这里注意：如果用esbuild压缩，要确保keepNames开启，避免类名被混淆
    minify: 'esbuild',
    esbuild: {
      keepNames: true
    }
    // 如果你偏好terser压缩，也可以，不用额外配置类名相关，插件已经处理好了
    // minify: 'terser'
  }
})

3. 为什么之前的方法没用？ #

• CSS Modules配置：只针对Vite的CSS Modules方案，和styled-components的类名生成逻辑完全不搭边，所以没用
• esbuild.keepNames：这个是用来保留JS变量名的，不是styled-components的类名，方向错了
• 改mode为development：Vite的build命令默认强制走生产构建逻辑，就算你设置mode为development，也只是用开发模式的环境变量，类名压缩还是会生效，只有vite dev才是真正的开发模式

额外提醒 #

如果你是在组件上手动加的className属性（比如<MyComponent className="my-custom-class">），配置完插件后，这个手动类名会和styled-components生成的类名同时存在，不会被覆盖哦！比如最终输出会是<div class="MyComponent-213 my-custom-class">，完全满足QA的测试需求。

内容来源于stack exchange