不能。css-to-jsx仅做语法映射，不识别语义、组件边界或伪类；转换后需配合styled-components等库使用，且不支持嵌套、CSS变量、@import等，路径含空格或中文易静默失败。
css-to-jsx 转换器能直接把旧 CSS 拆成 React 组件吗？
不能。这类工具（比如 css-to-jsx 或 postcss-jsx）只做语法映射，不理解语义、组件边界或状态逻辑。它会把 .btn { color: red } 硬转成 style={{color: 'red'}}，但不会帮你判断这个按钮该不该抽成 Button 组件，更不会处理 :hover 伪类或媒体查询的响应式逻辑。
常见错误现象：转换后样式失效、伪类丢失、CSS 变量未降级、@import 被忽略。
- 仅适用于纯 class 规则，带嵌套（Sass/Less）、自定义属性、keyframes 的需手动补全
- 转换结果必须配合 CSS-in-JS 库（如
styled-components或emotion）才能生效，原生 React 不认style对象里的选择器写法 - 路径中含空格或中文时，
postcss-cli常静默失败，建议先用rename批量规范化文件名
PostCSS 插件能否安全迁移 CSS Modules 到新框架？
可以，但得选对插件。核心是把 localIdentName 生成逻辑和作用域规则复现到目标环境，而不是硬搬文件。
使用场景：老项目用 Webpack + css-loader?modules，新框架用 Vite + css-modules 插件，两者默认哈希算法不同，导致 class 名不一致、样式断裂。
立即学习“前端免费学习笔记（深入）”；
- 关键配置项是
generateScopedName，必须在新旧两端保持一致，例如都设为[name]__[local]___[hash:base64:5] -
postcss-modules插件不处理:global()块，若旧代码大量依赖此写法，需先 grep 出来人工归类 - 性能影响：开启
exportGlobals: true会显著拖慢构建，仅在真正需要全局穿透时启用
tailwindcss migrate 工具为什么对 Bootstrap 项目几乎无效？
因为 tailwindcss migrate 只识别原子类（如 text-red-500），而 Bootstrap 的 btn btn-primary 是语义化组合类，没有一一对应的 Tailwind 原子映射关系。
真实错误现象：运行后输出大量 /* UNHANDLED: btn */ 注释，关键布局类（如 row / col-6）完全没被替换。
- 必须先用
grep -r "class=" src/ | grep -E "(btn|card|nav|alert)"扫出高频组件类，再逐个建立映射表 - Bootstrap 的栅格系统依赖 JS 行为（如 collapse、dropdown），Tailwind 纯 CSS 无法替代，这部分必须重写交互逻辑
- 自定义主题色（
$primary）需手动同步到tailwind.config.js的theme.extend.colors，否则颜色会错乱
如何避免自动化重构后出现“样式还在但布局崩了”？
根本原因不是工具不准，而是 CSS 依赖隐式上下文：父容器尺寸、字体继承、盒模型默认值、甚至 HTML 结构层级。自动工具看不到这些。
最容易被忽略的一点：老项目往往靠浏览器默认样式（user agent stylesheet）兜底，而新框架（尤其 SSR 或 Shadow DOM 场景）可能禁用或重置了这些。
- 上线前必查
box-sizing：老项目多用content-box，Tailwind 默认border-box，混用会导致宽度计算偏差 - 用
getComputedStyle(el)对比关键节点在新旧环境下的实际值，特别关注font-size、line-height、margin - 所有
@import和@layer必须提前合并进主入口 CSS，否则 PostCSS 处理顺序错乱，优先级反转
