Gatsby执行build报错CSS Minimizer提示Unknown Word如何解决？

我的Gatsby.js站点执行gatsby develop命令时运行正常无报错，但执行gatsby build命令构建时始终失败，返回错误如下：

Generating JavaScript bundles failed

styles.1a4684d19cee467a516a.css from Css Minimizer
C:\xampp\htdocs\gatsby-troubleshoot-positiveo\styles.1a4684d19cee467a516a.css:756:5
: Unknown word [styles.1a4684d19cee467a516a.css:756,5]
at Input.error (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\input.js:123:16)
at Parser.unknownWord (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\parser.js:518:22)
at Parser.other (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\parser.js:149:12)
at Parser.parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\parser.js:59:16)
at parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\parse.js:11:12)
at new LazyResult (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\lazy-result.js:133:16)
at Processor.process (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\processor.js:36:12)
at cssnanoMinify (eval at transform (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\node_modules\css-minimizer-webpack-plugin\dist\minify.js:34:28), :51:61)
at minify (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\node_modules\css-minimizer-webpack-plugin\dist\minify.js:15:32)
at Object.transform (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\node_modules\css-minimizer-webpack-plugin\dist\minify.js:35:24)

File: styles.1a4684d19cee467a516a.css

已尝试的解决方案 #

• 卸载postcss、postcss-loader后重新作为开发依赖安装，问题未解决
• 卸载css-minimizer-webpack-plugin后重新作为开发依赖安装，问题未解决
• 单独卸载postcss后再次执行构建，尝试使用gatsby内置的node_modules/gatsby/node_modules/postcss版本，仍报错
• 部署到Gatsby Cloud时构建同样出现该错误，配置环境变量NODE_VERSION=16后仍未解决

本地Node版本为v14.15.0，有多个React项目开发经验，本次为首次迁移到Gatsby，恳请帮忙排查问题。

复现步骤 #

1. 拉取复现代码
2. 任意平台环境下执行gatsby build命令即可复现，测试使用Node版本为v14.15.0

预期结果 #

执行gatsby build命令时可正常构建，与gatsby develop运行结果一致

实际结果 #

failed Building production JavaScript and CSS bundles - 116.946s

ERROR #98123 WEBPACK

Generating JavaScript bundles failed

styles.1a4684d19cee467a516a.css from Css Minimizer
C:\xampp\htdocs\gatsby-troubleshoot-positiveo\styles.1a4684d19cee467a516a.css:756:5
: Unknown word [styles.1a4684d19cee467a516a.css:756,5]
at Input.error (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\input.js:123:16)
at Parser.unknownWord (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\parser.js:518:22)
at Parser.other (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\parser.js:149:12)
at Parser.parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\parser.js:59:16)
at parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\parse.js:11:12)
at new LazyResult (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\lazy-result.js:133:16)
at Processor.process (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\lib\processor.js:36:12)
at cssnanoMinify (eval at transform (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\node_modules\css-minimizer-webpack-plugin\dist\minify.js:34:28), :51:61)
at minify (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\node_modules\css-minimizer-webpack-plugin\dist\minify.js:15:32)
at Object.transform (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\node_modules\css-minimizer-webpack-plugin\dist\minify.js:35:24)

File: styles.1a4684d19cee467a516a.css

环境信息 #

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-3340M CPU @ 2.70GHz
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 94.0.4606.71
    Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.38)
  npmPackages:
    gatsby: ^3.13.1 => 3.14.2
    gatsby-plugin-image: ^1.14.1 => 1.14.1
    gatsby-plugin-manifest: ^3.14.0 => 3.14.0
    gatsby-plugin-postcss: ^4.14.0 => 4.14.0
    gatsby-plugin-preconnect: ^1.2.1 => 1.2.1
    gatsby-plugin-preload-fonts: ^2.14.0 => 2.14.0
    gatsby-plugin-react-helmet: ^4.14.0 => 4.14.0
    gatsby-plugin-react-svg: ^3.0.1 => 3.0.1
    gatsby-plugin-sharp: ^3.14.1 => 3.14.1
    gatsby-plugin-sitemap: ^4.10.0 => 4.10.0
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^3.14.0 => 3.14.0
    gatsby-theme-material-ui: ^2.0.1 => 2.0.1
    gatsby-transformer-sharp: ^3.14.0 => 3.14.0
  npmGlobalPackages:
    gatsby-cli: 3.14.0

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