Vite2配置babel-plugin-styled-components displayName=true不生效如何解决

你当前配置失效的核心原因有两个：

• Vite 内置的 React 代码转译能力不依赖单独的 @rollup/plugin-babel，你额外引入的这个 babel 插件不会作用到常规的 React 代码编译流程，配置自然不会生效。
• 你使用的 @vitejs/plugin-react-refresh 是仅负责 React 热更新的旧版插件，本身不支持自定义传入 babel 插件配置。

第一步 调整依赖 #

先卸载无效依赖与旧版热更插件：

npm uninstall @vitejs/plugin-react-refresh @rollup/plugin-babel

安装 Vite 官方统一的 React 支持插件，该插件内置了热更新、babel 自定义配置能力：

npm install @vitejs/plugin-react -D

第二步 修改配置 #

调整 vite.config.js 内容，直接在 React 插件的参数中传入 babel 插件配置即可：

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

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          ['babel-plugin-styled-components', { displayName: true }]
        ]
      }
    })
  ]
});

如果不需要生产环境也开启 displayName，可以增加环境判断减少生产包体积：

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

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: process.env.NODE_ENV === 'development'
          ? [['babel-plugin-styled-components', { displayName: true }]]
          : []
      }
    })
  ]
});

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