CSS变量在variables.css中为驼峰命名，浏览器中全变为小写如何解决？

问题根因 #

公网环境下仅对variables.css生效的CSS压缩工具存在兼容性缺陷，旧版压缩工具默认遵循传统CSS属性不区分大小写的规则，会强制把自定义CSS变量的名称转为全小写，最终导致页面中驼峰命名的变量引用和小写的变量定义无法匹配，样式失效。

排查&解决步骤 #

• 确认压缩规则的来源
  优先排查两个核心位置：
  1. ASP.NET服务端的捆绑压缩配置：如果项目使用了System.Web.Optimization组件做静态资源压缩，旧版本的该组件确实存在CSS变量大小写强制转换的已知bug
  2. 公网入口的中间层配置：检查CDN、WAF、反向代理是否开启了CSS自动优化压缩，多数公有云静态资源加速服务的旧版默认压缩规则都会触发该问题
• 选择对应修复方案
  1. 替换压缩工具：更换为兼容CSS变量规范的压缩工具，比如clean-css v4.0+、cssnano默认预设版本，此类工具不会修改CSS自定义属性的大小写
  2. 调整命名规范：将所有CSS变量统一改为小写加中划线的通用命名格式（比如将--primaryButtonBackgroundColor调整为--primary-button-background-color），同步替换所有引用位置，该格式不会被任何压缩工具修改
  3. 排除对应文件的压缩规则：在服务端或公网中间层的压缩配置中，将variables.css单独加入压缩忽略名单，保留原始文件的大小写格式即可

内容的提问来源于stack exchange，提问作者Lance Stanley