第三方库样式被缩放，是因为postcss-pxtorem默认无差别转换所有CSS中的px值，包括node_modules中UI库的样式；需通过exclude正则排除/node_modules/、propList限定属性、rootValue与JS动态设置的html字体大小严格一致，并关闭mediaQuery。
第三方库样式被缩放，是因为插件默认处理了 node_modules 下的 CSS
postcss-pxtorem 不区分来源，只要 CSS 文件经过 PostCSS 流程，所有匹配的 px 值都会被转换。而像 ant-design-vue、vant、element-ui 这类 UI 库，其样式通常以未编译的 .css 或 .less 形式打包进 node_modules，一旦被 Webpack 的 css-loader + postcss-loader 处理，就会触发转换——比如 font-size: 14px 变成 font-size: 0.875rem，但它们的设计本意是“固定像素级控件”，根字号一变，整个组件就失真。
exclude 配置写在 vue.config.js 里根本不起作用
Webpack 构建链中，postcss-loader 的配置优先读取项目根目录下的 postcss.config.js，而不是 vue.config.js 中的 loaderOptions.postcss.plugins。很多同学把 exclude: /node_modules/ 塞进 vue.config.js，结果白配。
-
postcss.config.js必须存在且导出配置对象，例如：module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 37.5, propList: ['*'], exclude: /node_modules/ }) ] } -
exclude接收正则或字符串，但写成"node_modules"（无斜杠）在新版插件中可能失效，推荐用/node_modules/ - 如果项目用了
vue-cli-service且没手动建postcss.config.js，插件会 fallback 到package.json的postcss字段，此时要确保字段结构正确
propList 设得太宽，border 和 media query 也被误转
默认 propList: ['*'] 会让 border: 1px solid #000、box-shadow: 0 2px 4px rgba(0,0,0,.1) 全部参与换算，高 DPR 屏幕下细边框直接消失；更严重的是 @media (max-width: 768px) 被转成 @media (max-width: 48rem)，媒体查询失效。
- 只对字体、间距类属性转换更安全：
propList: ['font*', 'line*', 'margin*', 'padding*', 'width', 'height', 'top', 'left', 'right', 'bottom'] - 务必关闭
mediaQuery: false，否则所有媒体查询里的px都会被换 - 若需保留某些
px值不转，可在 CSS 中加注释：/* no */，如border: 1px /* no */ solid #ccc
rootValue 和运行时 JS 设置的 html.font-size 不一致
postcss-pxtorem 是纯构建期工具，它只做除法：rem = px / rootValue。如果你 JS 里动态设了 document.documentElement.style.fontSize = '37.5px'，但插件配置的 rootValue: 75，那所有 rem 值都会缩一半——UI 库虽没被 exclude，但换算基准错了，照样错乱。
立即学习“前端免费学习笔记（深入）”；
- 前后端必须对齐：JS 动态设置的值 = PostCSS 插件的
rootValue - 常见错误：设计稿是 750px，按 1rem = 100px 配了
rootValue: 100，但 JS 却按 1rem = 37.5px 设置，导致整体缩小 2.67 倍 - 建议把
rootValue提取为常量，在 JS 和 PostCSS 配置中复用，避免硬编码散落
真正卡住多数人的，从来不是“怎么配”，而是“谁在处理这行 CSS”——node_modules 路径是否被 loader 拦截、postcss.config.js 是否被识别、rootValue 和 JS 是否同步，三者缺一不可。
