从CRA迁移至Vite后组件样式失效，保存文件后恢复正常

将项目从Create React App（CRA）迁移到Vite+TypeScript，使用Material UI 4作为组件库。启动项目后组件样式完全缺失，但在VS Code中保存对应组件文件触发Vite热重载后，样式就能正常显示。

问题组件示例 #

import React from 'react'
import clsx from 'clsx'
import { Button as ButtonMaterial, CircularProgress } from '@material-ui/core'

import { sharedPalette } from '@support/theme-provider/themes/shared'
import useStyles from './Button.styles'

const Button = props => {
  const {
    className,
    children,
    color,
    disabled,
    href,
    onClick,
    loading,
    size,
    variant,
    loaderColor,
    ...rest
  } = props
  const classes = useStyles({ color, disabled, size, variant })

  return (
    <ButtonMaterial
      classes={{ root: clsx(classes.root, classes.themeColor) }}
      className={className}
      disabled={disabled || loading}
      href={href}
      onClick={onClick}
      size={size}
      variant={variant}
      {...rest}
    >
      {loading ? <CircularProgress size={20} style={{ color: loaderColor }} /> : children}
    </ButtonMaterial>
  )
}

export default Button

当前Vite配置（vite.config.ts） #

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

dns.setDefaultResultOrder('verbatim')

export default defineConfig({
  plugins: [react()],
  server: {
    host: 'localhost',
    port: 3000
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  }
})

问题表现 #

首次启动项目后，组件DOM元素上缺失自定义的CSS类（如classes.root、classes.themeColor对应的样式类），样式完全不生效；保存组件文件触发Vite热重载后，这些样式类才会被正确生成并注入，组件样式恢复正常。

解决方案 #

1. 调整Vite配置，兼容Material UI 4的JSS样式系统 #

修改vite.config.ts，替换SWC插件为标准React插件，并优化依赖预构建配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' // 替换为babel版React插件，提升JSS兼容性
import dns from 'dns'

dns.setDefaultResultOrder('verbatim')

export default defineConfig({
  plugins: [react()],
  server: {
    host: 'localhost',
    port: 3000
  },
  optimizeDeps: {
    // 强制预构建Material UI相关依赖，避免样式生成逻辑遗漏
    include: ['@material-ui/core', '@material-ui/styles', '@material-ui/system'],
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
  resolve: {
    // 指向Material UI的ES模块版本，优化模块解析
    alias: {
      '@material-ui/core': '@material-ui/core/es',
    },
  },
})

2. 确认样式文件的写法正确 #

确保Button.styles.ts是使用Material UI 4的makeStyles创建的：

import { makeStyles } from '@material-ui/core/styles'
import { sharedPalette } from '@support/theme-provider/themes/shared'

const useStyles = makeStyles((theme) => ({
  root: {
    padding: theme.spacing(2, 4),
    borderRadius: 8,
  },
  themeColor: {
    backgroundColor: sharedPalette.primary.main,
    color: '#fff',
    '&:hover': {
      backgroundColor: sharedPalette.primary.dark,
    },
  },
  // 其他样式类定义
}))

export default useStyles

原因说明 #

Material UI 4基于JSS的样式生成逻辑，在Vite的SWC插件预构建流程中可能存在兼容性问题，导致首次启动时样式生成代码未被正确执行。通过切换到babel版React插件，并强制预构建MUI相关依赖，可以确保样式生成逻辑在项目启动时正常运行，解决首次加载样式缺失的问题。

内容的提问来源于stack exchange，提问作者Eduardo Martínez