CSS用PostCSS-pxtorem自动转rem适配方法

本文深入解析了PostCSS-pxtorem在实际项目中“失效”的三大核心原因：插件执行顺序错误、rootValue与HTML根字体大小未严格匹配、以及exclude和propList配置不当，并针对性地给出了Vue CLI、CRA、Vite等主流构建环境的正确配置方式；同时对比了vw方案的优劣，指出pxtorem虽在新项目中渐被替代，但在兼容旧版iOS Safari、追求零运行时开销或需精细控制根字号的场景下仍具不可替代价值——真正棘手的不是工具本身，而是rem计算与JS动态设置font-size之间脆弱而关键的耦合。

PostCSS-pxtorem 为什么没生效？检查这三处

插件不工作，90% 是因为配置位置或时机错了。它必须在 PostCSS 插件链里、且在 postcss-preset-env 或 autoprefixer 之后运行（否则某些声明可能已被处理或丢弃）。

• postcss.config.js 中插件顺序写反了：把 postcss-pxtorem 放最前或夹在中间但没注意依赖关系
• 项目用了 Vue CLI / Create React App 等封装工具，直接改 postcss.config.js 不生效——得通过 vue.config.js 的 css.loaderOptions.postcss.plugins 或 CRA 的 craco 注入
• 样式文件没被 PostCSS 处理：比如 .vue 单文件组件里的