React项目部署Netlify时使用CSS变量报ParserError错误如何解决

你当前使用的react-scripts@4.0.3内置的postcss-safe-parser版本过低，无法正确解析CSS自定义变量、clamp()等现代CSS语法，在生产构建的严格校验模式下会直接抛出语法错误，触发构建失败。你看到的responsive.css第一行第23列报错，就是parser解析:root下的CSS变量时触发的。

方案1：升级react-scripts到5.x版本（优先推荐） #

该方案无需额外配置，新版本内置的postcss依赖原生支持现代CSS语法：

• 卸载旧版本react-scripts：
  npm uninstall react-scripts
• 安装最新稳定版react-scripts：
  npm install react-scripts@latest
• 删除项目根目录下的node_modules文件夹、package-lock.json或yarn.lock文件，重新执行npm install安装依赖
• 本地执行npm run build验证构建正常后，推送代码到Netlify重新部署即可。

方案2：自定义postcss配置（适配不升react-scripts的场景） #

如果因为项目兼容性问题不能升级react-scripts，可以通过添加postcss插件处理CSS变量：

1. 安装所需依赖：
   npm install postcss-custom-properties autoprefixer --save-dev
2. 项目根目录新建postcss.config.js，写入以下配置：

module.exports = {
  plugins: [
    require('postcss-custom-properties')({
      preserve: true // 保留原始CSS变量，不替换为静态值
    }),
    require('autoprefixer')
  ]
}

3. 本地构建验证通过后即可部署。

额外排查点 #

• 你当前CSS代码中的>是HTML转义的大于号，需要全部替换为原生的>字符，避免解析异常。
• 如果仍有报错，可以在Netlify后台的「Site settings - Environment variables」中添加环境变量CI=false，关闭CI模式下的严格校验，警告不会再被当做错误终止构建。

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