Next.js项目npm run build编译失败，CSS伪类/伪元素报错求助

我的项目托管在GitHub上，执行npm run dev能正常运行，但执行npm run build时出现编译失败错误，核心报错信息如下：

info  - Linting and checking validity of types
Failed to compile.

HookWebpackError: Expected a pseudo-class or pseudo-element.
-- inner error --
Error: Expected a pseudo-class or pseudo-element.
at ./static/css/c4db30214b074e73.css:645:3

最终提示Build failed because of webpack errors。

这个错误是Next.js生产构建中负责压缩CSS的cssnano工具检测到CSS语法不规范导致的，核心问题是项目CSS代码里的伪类/伪元素语法存在错误。

1. 定位错误代码 #

• 执行npm run build后，打开项目目录下的static/css/c4db30214b074e73.css文件，跳转到第645行，查看对应的CSS选择器。
• 根据该选择器的样式内容，回到项目源码（CSS模块、全局CSS文件、组件内联样式等）中找到对应的代码片段。

2. 修复CSS语法错误 #

常见错误场景及修复方式：

• 伪元素语法混用：伪元素（如before、after、first-letter）需用双冒号::，伪类（如hover、active、nth-child）需用单冒号:，不要混用。
• 拼写错误：检查是否存在伪类/伪元素名称拼写错误（比如把:hover写成:hove）。
• 无效语法：检查是否存在多余冒号（比如.class::后未跟伪元素名称）、嵌套规则错误（如CSS预处理器或CSS-in-JS中的嵌套写法错误）。

3. 临时绕过方案（不推荐，仅用于紧急排查） #

若需临时完成构建，可在next.config.js中调整cssnano配置，关闭严格语法检查，但最终建议修复语法错误：

module.exports = {
  compiler: {
    cssMinimizerOptions: {
      preset: ['default', {
        normalizeWhitespace: true,
        discardUnused: false,
      }],
    },
  },
}

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