如何排查Next.js项目构建时出现的Unknown word错误？

以下是针对该问题的分步排查与解决方法：

1. 临时禁用CSS压缩，定位错误源码 #

报错指向的是打包后的压缩CSS文件，无法直接对应源码，先禁用压缩让构建完成，找到未压缩的CSS内容：

• 修改next.config.js，移除CSS minimizer：

  module.exports = {
    webpack: (config) => {
      config.optimization.minimizer = config.optimization.minimizer.filter(
        minimizer => minimizer.constructor.name !== 'CssMinimizerPlugin'
      );
      return config;
    },
  };
  

• 执行npm run build，找到报错路径对应的未压缩CSS文件（如/Activity/SiteNext/static/css/[hash].css），定位到第1085行第26位的内容，根据这段CSS的类名、属性特征，去项目的SASS/Tailwind源码中搜索匹配的代码，锁定问题文件。

2. 严格检查SASS语法错误 #

Dev模式下SASS编译较为宽松，生产构建会严格校验，重点排查：

• 未闭合的括号、遗漏的分号
• 变量引用错误（如把$var写成var）
• 混入（mixin）调用缺少参数、嵌套层级错误
• 执行命令单独检查所有SASS文件：

  npx sass --check ./src/styles/**/*.scss
  

3. 排查Tailwind CSS相关问题 #

• 检查tailwind.config.js：自定义工具类、变体是否存在语法错误，content配置是否覆盖所有需要扫描的文件（避免生成无效CSS）
• 临时关闭JIT模式（若开启），验证是否能正常构建：

  module.exports = {
    // mode: 'jit', // 注释该行
    // ...其他配置
  };
  

• 确认@apply等Tailwind指令在SASS中的使用是否符合语法规范，比如是否放在正确的选择器内。

4. 更新依赖解决版本冲突 #

依赖版本不兼容可能导致PostCSS处理异常：

• 更新核心依赖：

  npm install next@latest tailwindcss@latest postcss@latest autoprefixer@latest sass@latest
  

• 清理缓存后重新安装：

  rm -rf .next node_modules package-lock.json && npm install
  

5. 逐步缩小排查范围 #

若以上方法未解决问题，可逐步注释页面/组件的样式导入，每次执行npm run build，直到找到触发错误的文件，再在该文件内逐段排查代码。

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