webpack中calc()兼容需分两步：先用postcss-custom-properties替换css变量，再用postcss-calc静态计算；less/sass须正确转义；安卓4.4 webview需层叠固定值+calc()且手动验证输出。
Webpack里calc()不兼容，根本不是PostCSS能自动修的
PostCSS默认对calc()完全无感——它不解析、不降级、不报错。你写width: calc(100% - var(--gap))，插件照常输出，但IE11、Android 4.4 WebView看到就静默跳过整条规则。这不是“漏加前缀”，是浏览器压根不认这个语法结构。
必须分两步：先处理CSS变量，再静态求值calc()
老版本兼容的核心路径只有一条：把运行时计算变成构建期确定值。这要求两个插件严格配合：
-
postcss-custom-properties设preserve: false，把var(--gap)替换成实际值（如20px） -
postcss-calc紧随其后，把calc(100% - 20px)直接算成80%或320px（取决于上下文） - 顺序不能颠倒：如果
postcss-calc在前，它会卡在var(--gap)上无法计算，直接跳过
Less/Sass里写的calc()要先转义，否则Webpack根本收不到原始字符串
Webpack的postcss-loader只处理最终输出的CSS文本。如果你用Less写width: calc(100% - @gap)，Less编译器会在PostCSS之前就把这行干掉——要么报错Variable @gap is undefined，要么错误简化成calc(80%)。必须提前干预：
- Less中统一用
width: ~"calc(100% - @{gap})"，确保输出是原样calc(100% - 20px) - Sass中必须用
width: calc(100% - #{$gap})，且$gap定义时带单位（$gap: 20px），否则插值后变成calc(100% - 20)，老浏览器直接丢弃 - 别信
e("calc(...)")这类旧写法，Webpack 5+ 的less-loader已不兼容
安卓4.4 WebView这种硬伤，fallback只能靠层叠顺序
Chromium 30对calc()的支持阈值极低：哪怕你用PostCSS算出了width: 320px，只要原始CSS里还留着width: calc(100% - 2rem)，WebView就会连同前面那行一起忽略。唯一可靠方案是手动层叠：
- 固定值写在前：
width: 288px（对应2rem在16px基准下的像素值） - calc()写在后：
width: calc(100% - 2rem) - 不能依赖Sass函数自动生成fallback：rem在编译期不可知，生成的
288px只是死值，失去响应性
真正容易被忽略的是：PostCSS插件链跑完后，你得打开最终生成的CSS文件，逐行确认calc()是否已被展开——任何残留的calc(都意味着某处转义失败或插件顺序错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
