React项目执行yarn build时报CSS解析意外结束输入错误如何解决

定位步骤 #

• 该报错本质是CSS解析器处理样式表达式时遇到了不完整的输入，优先排查项目内所有样式代码（包括.css/.scss/.less文件、CSS-in-JS写法、行内样式的动态计算逻辑）：
  • 全局搜索所有calc()、min()、max()、clamp()等CSS计算函数，检查是否存在漏写右括号、参数不完整的问题，例如width: calc(100% - 20px这种缺少结尾括号的写法是最高频的触发原因
  • 检查自定义CSS变量的定义和使用逻辑，是否存在var(--xxx)漏写括号、变量值为空的情况
  • 排查近期新增的样式文件是否存在复制粘贴不全、开头就有语法错误的情况
• 复杂项目可以用二分法快速定位问题文件：逐次注释最近新增的样式模块/业务组件，执行yarn build测试，直到报错消失即可锁定问题文件范围
• 如果用的是未eject的CRA项目，可以临时修改webpack配置开启CSS资源定位：找到node_modules/react-scripts/config/webpack.config.js中的css-loader配置项，添加sourceMap: true后重新打包，报错会输出具体的错误文件路径和行数

解决方法 #

• 定位到错误的样式代码后，补全不完整的CSS表达式即可解决问题
• 如果是第三方依赖包内的CSS文件语法错误，可以在package.json中通过resolutions字段锁定兼容版本的依赖，或者配置打包规则跳过对应依赖的CSS解析校验

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