React生产构建生成含clamp()的错误SCSS问题及解决方案问询

问题原因确认 #

该问题是Create React App默认集成的CSS压缩工具cssnano的已知bug，当font简写属性中直接传入clamp()、calc()这类CSS函数作为字号值时，压缩器会错误识别属性值的边界，在函数末尾额外插入逗号，最终导致整个font属性被浏览器判定为非法值失效。

可行绕行方案 #

• 方案1：用SCSS变量包裹clamp值，绕开压缩器的错误识别

$h1-font-size: clamp(3rem, 6.5vw, 10rem);
h1 {
  font: 500 $h1-font-size "Ubuntu", "sans-serif";
}

• 方案2：用SCSS插值语法包裹clamp函数，强制压缩器不对该段内容做解析优化

h1 {
  font: 500 #{clamp(3rem, 6.5vw, 10rem)} "Ubuntu", "sans-serif";
}

• 方案3：修改构建配置禁用cssnano的font属性优化规则
  如果你的项目支持自定义构建配置（比如已eject、使用customize-cra等），可以在cssnano配置中添加如下规则关闭错误优化：

cssnano: {
  preset: ['default', {
    font: false
  }]
}

• 方案4：拆分font简写为独立属性（你当前在用的方案，兼容性最高，完全避开简写解析坑）

h1 {
  font-weight: 500;
  font-size: clamp(3rem, 6.5vw, 10rem);
  font-family: "Ubuntu", "sans-serif";
}

内容的提问来源于stack exchange，提问作者Diogenis Siganos