NextJS构建报错：HookWebpackError: 期望伪类或伪元素

问题描述 #

运行next build时触发如下错误：

HookWebpackError: Expected a pseudo-class or pseudo-element.
    at makeWebpackError (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:308185)
    at /Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:105236
    at eval (eval at create (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:34:1)
-- inner error --
Error: Expected a pseudo-class or pseudo-element.
    at /Users/eliot/Developer/eliothertenstein.com/static/css/66780ddc5f37cb3b.css:906:3
    at Root._error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78465)
    at Root.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:124360)
    at Parser.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:86811)
    at Parser.expected (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93145)
    at Parser.pseudo (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:89313)
    at Parser.parse (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92668)
    at Parser.loop (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92233)
    at new Parser (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78322)
    at Processor._root (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95242)
    at Processor._runSync (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95749)
caused by plugins in Compilation.hooks.processAssets

已确认问题与Tailwind CSS/PostCSS强相关：移除global.scss中的Tailwind代码后构建正常，仅保留Tailwind代码则触发报错。

已尝试的调试动作：

• 用正则搜索项目中带空格的无效Tailwind类（如md: text-red-600）
• 重装所有node_modules
• 注释所有CSS文件后构建恢复正常
• 切换到Yarn Classic/Node/npx替代Yarn v3运行命令

针对性调试与解决步骤 #

1. 定位错误的原始CSS代码 #

错误提示指向生成的CSS文件第906行，但压缩后的代码无法直接定位问题。临时禁用CSS压缩，让生成的代码保持可读：
修改next.config.js：

module.exports = {
  webpack: (config) => {
    config.optimization.minimize = false;
    return config;
  },
};

重新运行next build，打开生成的未压缩CSS文件，直接查看第906行的规则，定位具体是哪个选择器或语法触发了解析错误。

2. 排查Tailwind配置与语法错误 #

常见触发这类问题的Tailwind场景：

• 自定义工具类/变体中存在无效CSS语法，比如伪类冒号后带空格（如:hover ）、伪类拼写错误
• tailwind.config.js中配置的变体存在语法错误，比如错误的伪类命名
• 模板中使用了未正确转义的特殊字符作为类名

3. 检查PostCSS插件冲突 #

Next.js默认PostCSS配置可能与自定义插件冲突：

• 临时修改postcss.config.js，只保留tailwindcss和autoprefixer，逐步添加其他插件排查冲突源
• 锁定Tailwind与PostCSS版本，避免兼容问题：

{
  "devDependencies": {
    "tailwindcss": "^3.3.0",
    "postcss": "^8.4.21",
    "autoprefixer": "^10.4.14"
  }
}

4. 验证全局SCSS中的Tailwind语法 #

确保global.scss中Tailwind引入方式正确：

@tailwind base;
@tailwind components;
@tailwind utilities;

同时检查全局SCSS中的自定义规则，是否存在类似&: （冒号后带空格）的错误写法，或伪类/伪元素的语法误用。

5. 启用详细构建日志 #

使用以下命令运行构建，获取Webpack与PostCSS的详细日志，定位具体出错的模块或规则：

NEXT_DEBUG=webpack next build

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