Yarn Berry+Vite+React环境下@emotion/styled自动导入失效问题排查

1. 检查Vite自动导入插件的配置 #

如果使用unplugin-auto-import实现自动导入，默认规则可能仅覆盖@emotion/react，需手动添加@emotion/styled的导出配置。

修改vite.config.ts：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import AutoImport from 'unplugin-auto-import/vite'
import { EmotionResolver } from 'unplugin-auto-import/resolvers'

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react' // 确保已配置此项
    }),
    AutoImport({
      imports: [
        'react',
        '@emotion/react',
        {
          '@emotion/styled': ['default as styled'] // 添加强制自动导入styled
        }
      ],
      resolvers: [
        EmotionResolver() // 启用Emotion的自动导入解析器
      ],
      dts: true // 生成自动导入的类型声明文件
    })
  ]
})

2. 解决Yarn Berry PnP的TS类型识别问题 #

Yarn Berry的PnP模式下，VSCode可能无法自动识别@emotion/styled的类型定义，需配置VSCode的TypeScript SDK路径：

在项目根目录的.vscode/settings.json中添加：

{
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

配置后重启VSCode，让TS加载Yarn提供的SDK。

3. 确认@emotion的Babel插件配置（若使用） #

如果项目依赖Babel，需确保@emotion/babel-plugin已正确配置，可检查vite.config.ts中的react插件配置：

react({
  babel: {
    plugins: ['@emotion/babel-plugin']
  }
})

4. 清理缓存并重启开发服务 #

执行以下命令清理缓存，然后重启Vite服务：

yarn cache clean
yarn vite --force

内容的提问来源于stack exchange，提问作者최성민