Next.js build编译失败提示CSS缺分号，dev模式运行正常无报错

你遇到的是Next.js生产构建阶段CSS压缩工具校验报错，开发模式不会执行CSS压缩优化，因此不会触发对应校验，才会出现开发正常、构建失败的情况，按以下步骤排查即可：

1. 临时禁用CSS压缩，定位具体报错文件
   在项目根目录新建next.config.js，写入以下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 临时关闭CSS压缩，输出完整报错信息
    config.optimization.minimizer = config.optimization.minimizer.filter(
      item => item.constructor.name !== 'CssMinimizerPlugin'
    )
    return config
  }
}

module.exports = nextConfig

重新执行npm run build，此时控制台会输出具体报错的CSS文件路径和真实行号，不再显示模糊的<css input>提示。

2. 检查目标CSS文件的常见错误
   如果肉眼未发现缺少分号的问题，优先排查以下场景：

• 有没有使用//格式的单行注释，原生CSS仅支持/* */格式的注释，开发模式loader可能兼容该写法，但生产压缩工具无法识别，会将//后的内容识别为CSS属性，最终触发缺分号报错
• 有没有写嵌套CSS语法，原生CSS Modules默认不支持嵌套写法，若你写了.a { .b { xxx } }这类嵌套代码，开发模式兼容但生产构建会解析失败
• 有没有在CSS文件中错误导入了非CSS格式的文件，或者导入路径存在拼写错误

3. 修复问题后，删除next.config.js中临时关闭CSS压缩的代码，重新执行构建即可。

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