Vite单仓中styled-components的displayName配置失效问题

要让monorepo里作为依赖的子包也能在开发环境保留styled-components组件的displayName，核心是在Vite预构建依赖的esbuild流程中加入styled-components的处理插件，具体步骤如下：

• 安装esbuild的styled-components插件
  首先安装专门处理styled-components的esbuild插件：

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

• 配置Vite的optimizeDeps.esbuildOptions
  在根项目的vite.config.js中，给预构建依赖的esbuild流程添加该插件，确保预构建子包时保留displayName：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import styledComponentsPlugin from 'esbuild-plugin-styled-components';
  
  export default defineConfig({
    plugins: [react()],
    optimizeDeps: {
      esbuildOptions: {
        plugins: [
          styledComponentsPlugin({
            displayName: true, // 开启displayName
            fileName: false, // 可选：是否在类名中包含文件名，按需调整
          }),
        ],
      },
    },
    // 保留你原有build配置
    build: {
      rollupOptions: {
        // 你的原有配置内容
      },
    },
  });
  

• 检查依赖排除列表
  确认optimizeDeps.exclude中没有包含你的monorepo子包，如果之前加过排除规则，需要移除。只有让Vite预构建这些子包，上面的esbuild插件才能对它们生效。

• 统一styled-components版本（可选）
  确保根项目和所有子包使用的styled-components版本一致，避免版本差异导致的插件处理异常。

原理说明：Vite的build配置只作用于根项目的代码编译，而monorepo中的子包会被Vite作为依赖进行esbuild预构建，这个过程不受build里的displayName设置影响。通过在optimizeDeps.esbuildOptions中添加styled-components插件，就能让esbuild在预构建子包时自动保留组件的displayName，解决嵌套节点CSS名称被压缩的问题。

内容的提问来源于stack exchange，提问作者gmlt.A