Gatsby构建失败：WEBPACK.BUILD-JAVASCRIPT错误求助

报错信息 #

failed Building production JavaScript and CSS bundles - 7.408s

 ERROR #98123  WEBPACK.BUILD-JAVASCRIPT

Generating JavaScript bundles failed

styles.41cdc950875b04ce14b3.css from Css Minimizer
/Users/rit/proj1/styles.41cdc950875b04ce14b3.css:1175:18: Unknown word [styles.41cdc950875b04ce14b3.css:1175,18]
    at Input.error (/Users/rit/proj1/node_modules/postcss/lib/input.js:106:16)
    at Parser.unknownWord (/Users/rit/proj1/node_modules/postcss/lib/parser.js:593:22)
    at Parser.other (/Users/rit/proj1/node_modules/postcss/lib/parser.js:435:12)
    at Parser.parse (/Users/rit/proj1/node_modules/postcss/lib/parser.js:470:16)
    at parse (/Users/rit/proj1/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (/Users/rit/proj1/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (/Users/rit/proj1/node_modules/postcss/lib/processor.js:53:14)
    at cssnanoMinify (eval at transform (/Users/rit/proj1/node_modules/gatsby/node_modules/css-minimizer-webpack-plugin/dist/minify.js:34:28), <anonymous>:51:61)
    at minify (/Users/rit/proj1/node_modules/gatsby/node_modules/css-minimizer-webpack-plugin/dist/minify.js:15:32)
    at Object.transform (/Users/rit/proj1/node_modules/gatsby/node_modules/css-minimizer-webpack-plugin/dist/minify.js:35:24)

File: styles.41cdc950875b04ce14b3.css


 ERROR #98123  WEBPACK.BUILD-JAVASCRIPT

Generating JavaScript bundles failed

styles.d9f8181dfdee20ae152d.css from Css Minimizer
/Users/rit/proj1/styles.d9f8181dfdee20ae152d.css:1175:18: Unknown word [styles.d9f8181dfdee20ae152d.css:1175,18]
    at Input.error (/Users/rit/proj1/node_modules/postcss/lib/input.js:106:16)
    at Parser.unknownWord (/Users/rit/proj1/node_modules/postcss/lib/parser.js:593:22)
    at Parser.other (/Users/rit/proj1/node_modules/postcss/lib/parser.js:435:12)
    at Parser.parse (/Users/rit/proj1/node_modules/postcss/lib/parser.js:470:16)
    at parse (/Users/rit/proj1/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (/Users/rit/proj1/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (/Users/rit/proj1/node_modules/postcss/lib/processor.js:53:14)
    at cssnanoMinify (eval at transform (/Users/rit/proj1/node_modules/gatsby/node_modules/css-minimizer-webpack-plugin/dist/minify.js:34:28), <anonymous>:51:61)
    at minify (/Users/rit/proj1/node_modules/gatsby/node_modules/css-minimizer-webpack-plugin/dist/minify.js:15:32)
    at Object.transform (/Users/rit/proj1/node_modules/gatsby/node_modules/css-minimizer-webpack-plugin/dist/minify.js:35:24)

File: styles.d9f8181dfdee20ae152d.css

not finished Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 7.927s

背景信息 #

• 用npm i -f强制安装依赖（存在依赖冲突但安装成功）
• npm run dev开发模式运行正常
• npm run build生产构建失败，本地找不到报错里的哈希命名CSS文件
• 移除global.css所有内容后构建成功，但之前该文件有内容时构建正常

解决步骤 #

1. 排查global.css语法问题 #

报错核心是CSS解析到未知词汇，优先检查global.css：

• 查找未闭合的括号、遗漏的分号
• 排查是否使用了CSSnano不兼容的实验性语法、拼写错误的属性名/选择器
• 检查是否混入了非CSS代码（比如JS片段、注释格式错误）

2. 临时禁用CSS压缩验证 #

修改gatsby-config.js，关闭CSS压缩功能，确认是否为压缩环节导致的问题：

module.exports = {
  plugins: [
    // 其他插件保留
    {
      resolve: `gatsby-plugin-minify-css`,
      options: {
        disable: true, // 临时禁用压缩
      },
    },
  ],
}

如果构建成功，说明是CSSnano在压缩时解析出错，针对性修复CSS语法即可。

3. 修复依赖冲突 #

强制安装依赖可能导致版本不兼容，引发构建异常：

• 删除node_modules和package-lock.json
• 执行npm install重新安装，不要加-f，解决依赖冲突后再尝试构建
• 若部分依赖需特定版本，手动在package.json中指定兼容版本

4. 查看未压缩的CSS内容 #

在开发模式下，打开浏览器开发者工具，找到global.css对应的样式代码，复制到本地文件后用CSS语法校验工具扫描错误。

5. 排查插件冲突 #

检查是否同时安装了多个CSS处理插件（如gatsby-plugin-postcss、gatsby-plugin-sass），插件间的冲突可能导致生产构建时CSS生成异常，可尝试暂时禁用部分插件逐一排查。

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