从Webpack4迁移至Vite的React项目CSS加载报错求助

报错原因分析 #

这个错误并非Vite不支持JS/JSX中导入CSS（Vite默认内置该能力），大概率是vite.config.js存在错误配置，或是项目残留的Webpack相关配置/插件干扰了Vite的CSS处理逻辑。

具体解决步骤 #

• 重置Vite基础配置
  先将vite.config.js恢复为React项目的最简有效配置，排除复杂配置的干扰：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
  });
  

  重启Vite服务后测试是否报错。若恢复正常，再逐步添加自定义配置（如路径别名、构建输出设置等），每添加一项就测试一次，定位出问题配置项。

• 清理Webpack残留配置与依赖
  项目中若保留Webpack专属的CSS处理配置或依赖，会与Vite逻辑冲突：

  • 删除webpack.config.js、Webpack专属的postcss.config.js等文件；
  • 卸载css-loader、style-loader、mini-css-extract-plugin等Webpack相关CSS依赖；
  • 检查package.json的scripts，确保启动命令为vite而非Webpack相关命令。

• 验证CSS路径与导入写法
  确认./renderCount.css的相对路径正确，若路径无误，可尝试绝对路径导入测试：

  import '/src/renderCount.css';
  

  若使用路径别名，需确保别名配置正确：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import path from 'path';
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
  });
  

  之后用别名导入：import '@/renderCount.css'

• 更新Vite及相关依赖
  旧版本Vite可能存在兼容性问题，先更新到最新稳定版：

  npm update vite @vitejs/plugin-react
  

  再删除node_modules和锁文件，重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

内容的提问来源于stack exchange，提问作者Theo Wright