className="xxx" → className={styles.xxx} 的正则替换需分步处理：先用基础正则匹配单类名，多类名必须人工拆解；import './xxx.css' → import styles from './xxx.module.css' 替换时须校验路径与文件存在性；动态拼接（如模板字符串、数组join）不可自动替换，须人工重写并验证哈希类名是否生效。
className="xxx" → className={styles.xxx} 的正则替换
直接匹配并转换普通 CSS 类名引用是最常见的第一步，但容易漏掉多类名、带空格或引号嵌套的情况。
- 基础写法：
className="([a-zA-Z0-9_-]+)"→className={styles.$1}，适用于单个纯英文/数字/下划线/短横线类名 - 多类名必须拆开处理，不能简单用
className="([^"]+)"→className={${styles.$1}}，因为$1会捕获整个字符串（如"header main active"），无法映射到多个styles.xxx - 安全做法是分两步：先用
className="([^"]+)"Find All预览，人工确认是否全是简单类名；若有复合类名（含空格、动态拼接），必须手动或用更细粒度正则逐个处理 - 注意转义：双引号内若含
"或\"，该行不应参与替换，否则破坏 JSX 结构
import './xxx.css' → import styles from './xxx.module.css'
这步看似简单，但路径拼错、大小写不一致、相对路径层级变化都会导致编译失败。
- 查找：
import\s+['"]([^'"]+\.css)['"];（注意\s+匹配任意空白，['"]兼容单双引号） - 替换：
import styles from '$1.module.css';，$1即原路径（如./components/Button.css→./components/Button.module.css） - 风险点：如果原文件是
index.css，替换后变成index.module.css，但实际可能期望是index.module.scss或已存在同名模块文件——需提前检查目标目录 - 别忽略
import语句末尾的分号，有些项目用;，有些无分号（ESLint 配置不同），建议分两次跑：一次带;，一次不带
JSX 中 className 拼接场景的识别与规避
正则无法理解 JavaScript 逻辑，遇到模板字符串、三元、数组 join 等动态 class 构建时，硬替换必出错。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 典型危险模式：
className={`header ${isActive ? 'active' : ''}`}或className={['header', isActive && 'active'].filter(Boolean).join(' ')} - 这类代码里
header和active不能直接套styles.xxx，必须改为${styles.header}+ 条件逻辑重写 - 用正则
className=\$\{[^}]+\}快速定位所有模板字符串 class 赋值，人工逐个评估——不要试图用正则自动改，成功率极低且易引入 bug - 更隐蔽的是
className={clsx(styles.header, isActive && styles.active)}这类工具函数调用，正则根本无法识别语义，只能靠项目是否已引入clsx来判断是否跳过
替换后必须验证的三个硬性检查点
批量替换不是终点，而是高风险操作的开始。没做这三项检查，等于没改。
立即学习“前端免费学习笔记（深入）”；
-
npm run dev启动本地服务，看页面是否白屏或样式丢失——这是最直接的反馈，尤其注意 SSR 页面首屏渲染 - 全局搜索
className=，确认无残留未替换的"xxx"写法，也确认没有误把data-class、aria-label等属性当className替换了 - 打开任意一个已改组件的 DOM，检查浏览器开发者工具中 class 名是否仍是原始字符串（如
project_headerbox_left），而非哈希化后的ProjectHeaderBoxLeft__headerbox_left__abc123——若仍是原名，说明styles.xxx未正确注入或命名冲突
