从CRA迁移至Vite的React+TailwindCSS项目CI/CD构建失败求助

可能原因及修复步骤 #

• 清理CI/CD环境缓存
  CI环境默认会缓存node_modules和构建产物，即便本地已删除postcss.config.js，CI缓存里可能还残留旧文件。在CI构建脚本开头添加清理命令：

  rm -rf node_modules dist
  rm -f postcss.config.js postcss.config.cjs
  npm install
  

• 排查隐藏/残留的PostCSS配置文件
  检查项目根目录及所有子目录，确认是否存在隐藏配置（如.postcss.config.js）、备份文件（如postcss.config.js.bak），或是依赖包自动生成的配置文件。可在CI构建前执行以下命令定位：

  find . -name "postcss.config.*" -type f
  

  找到后直接删除对应文件。

• 在Vite配置中显式定义PostCSS规则
  绕过Vite自动查找配置文件的逻辑，直接在vite.config.ts中内置PostCSS配置，示例如下：

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

  此配置会覆盖Vite自动查找的规则，避免残留文件干扰。

• 确认CI代码拉取的完整性
  检查CI/CD的代码拉取步骤，确保拉取的是最新分支代码，且未设置文件忽略规则导致旧的postcss.config.js未被同步删除。

内容的提问来源于stack exchange，提问作者Kuba Bujak