create-react-app打包时border属性css-min函数被移除问题求解

• Create React App 生产构建默认使用 cssnano 执行CSS压缩，其内置的 postcss-ordered-values 插件针对border简写属性做了激进的优化逻辑：当插件无法识别border宽度位置的值类型（你自定义的css-min函数无法被旧版本cssnano解析为合法宽度值），就会直接丢弃宽度部分内容，仅保留可识别的边框样式、颜色值。
• 开发环境不会开启CSS压缩规则，所以样式可以正常保留，仅生产构建会触发该问题。你之前尝试的自定义css-min函数、大写Min/Clamp的写法仅能绕过Sass内置函数和CSS原生函数的命名冲突，无法解决cssnano的识别问题。

方案1：拆分border简写属性（最推荐，无额外依赖） #

不要将border宽度、样式、颜色写在同一条简写属性中，拆分为独立属性即可避开cssnano的border优化逻辑，修改后样式如下：

div.letterCaret {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* 拆分border为三个独立属性 */
  border-width: min(10px, 1.3vh);
  border-style: solid;
  border-color: transparent;
  width: 10px;
  height: 10px;
  border-top-color: inherit;
}

该方案不需要修改任何构建配置，修改后生产打包即可正常生效。

方案2：用Sass插值包裹函数值 #

如果你想保留border简写写法，可以将宽度部分用Sass插值语法#{}包裹，强制cssnano将其识别为普通字符串保留，不会被优化删除：

border: #{min(10px, 1.3vh)} solid transparent;

该方案同样不需要修改构建配置，仅需修改当前问题行的样式代码即可。

方案3：修改cssnano压缩规则 #

如果不想修改任何业务样式，可以通过craco、react-app-rewired等工具覆盖Create React App的默认PostCSS配置，禁用border相关的激进优化：

// craco.config.js 示例配置
module.exports = {
  style: {
    postcss: {
      loaderOptions: {
        postcssOptions: {
          plugins: [
            require('cssnano')({
              preset: ['default', {
                orderedValues: false, // 禁用属性值排序优化，避免border宽度被误删
              }]
            })
          ]
        }
      }
    }
  }
}

该方案需要额外引入构建配置覆盖工具，不需要修改业务代码。

内容的提问来源于stack exchange，提问作者Laurence Summers