React应用正常运行但构建失败（第三方CSS语法错误）的原因及忽略错误构建的方法咨询

这是个非常典型的开发/生产构建不一致问题，我来帮你逐个解答：

为什么开发环境正常运行但生产构建失败？ #

核心原因是开发环境与生产构建对CSS的语法校验严格程度完全不同：

• 开发阶段的工具链容错性更高：开发时Webpack通常用style-loader把CSS直接注入到浏览器DOM里，而浏览器本身对CSS语法错误有很强的容错能力——它会自动忽略无效的规则，继续解析后续代码，所以你看不到任何报错，应用也能正常运行。
• 生产构建的优化逻辑更严谨：生产模式下，Webpack会启用代码压缩、CSS提取等优化步骤，配套的css-loader或PostCSS插件会开启严格的语法检查，目的是确保产出的CSS精简、无错误，避免线上出现样式渲染异常。你遇到的ParserError: Syntax Error at line: 1, column 61就是在这个严格校验阶段触发的，浏览器能忽略的错误，构建工具不会放过。

如何在存在该错误的情况下继续完成构建？ #

分两种方案，优先推荐从根源解决，临时方案仅用于紧急场景：

方案1：定位并修复CSS语法错误（推荐） #

虽然CSS文件体量庞大，但定位错误很简单：

• 直接打开src/css/style2.css，跳转到第1行第61列，检查附近的代码——大概率是出现了语法失误，比如多打了逗号、括号不匹配、属性值格式错误（比如颜色值少了引号、单位写错）。
• 可以用CSS语法验证工具（比如W3C CSS验证器）上传文件，它会精准标记所有错误位置和原因，比手动查找高效得多。

方案2：临时绕过CSS语法检查（仅紧急场景使用） #

如果你需要先完成构建再处理错误，可以修改构建工具的配置关闭语法校验：

• 若使用Create React App（未执行eject）：借助craco覆盖默认配置。先安装craco，然后在项目根目录创建craco.config.js：

module.exports = {
  style: {
    css: {
      loaderOptions: {
        css: {
          parser: { css: false }, // 关闭CSS语法解析校验
        },
      },
    },
  },
};

最后把package.json里的build命令改成craco build即可。

• 若已eject或自定义Webpack配置：找到Webpack配置中处理CSS的规则，给css-loader添加parser: { css: false }：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              parser: { css: false },
            },
          },
        ],
      },
    ],
  },
};

⚠️ 注意：这种方法会让构建工具忽略所有CSS语法错误，可能导致线上样式出现渲染问题，所以只是临时救急方案，之后一定要补全错误修复。

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