Gatsby Build 失败，因为 postcss 和 css-minimizer-webpack-plugin 上的 CSS minimzer 出现“未知单词”错误

Question

当我使用“gatsby develop”时，我的 Gatsby.js 网站运行时没有错误，但当我使用“gatsby build”时，构建总是失败并返回以下错误：

` 生成 JavaScript 包失败

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\post
css\lib\input.js:123:16)
at Parser.unknownWord (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modul
es\postcss\lib\parser.js:518:22)
at Parser.other (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\pos
tcss\lib\parser.js:149:12)
at Parser.parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\pos
tcss\lib\parser.js:59:16)
at parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\li
b\parse.js:11:12)
at new LazyResult (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\p
ostcss\lib\lazy-result.js:133:16)
at Processor.process (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_module
s\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\no
de_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

` 转载的github链接：

https://github.com/Dahbu7/gatsby-issue-1

我已经卸载了 postcss 和 postcss-loader 并将它们重新安装为开发依赖项 - 这不起作用 我已卸载 css-minimizer-webpack-plugin 并将其重新安装为开发依赖项 - 这也不起作用。

请注意：在我卸载了 postcss 后，我再次运行 build，以便它可以使用 node_modules/gatsby 文件夹中的 postcss 包，如 node_modules/gatsby/node_modules/postcss 并且这也不起作用。

我的节点版本是：v14.15.0 我的 dev-dependency 安装的 webpack 版本是： 其他所有内容都可以在 github light 复制 repo 中找到：

https://github.com/Dahbu7/gatsby-issue-1

我尝试将它托管在 gatsby 云上，但由于完全相同的原因，部署构建也失败了。我什至把 NODE_VERSION = 16 作为环境变量做了，但没有用。请再试一次。也许我做错了。

我已经完成了几个 React 项目，但这是我第一次转换到 Gatsby。任何帮助将不胜感激。

复制链接 https://github.com/Dahbu7/gatsby-issue-1

复制步骤 转到我发布的回购：https://github.com/Dahbu7/gatsby-issue-1 您可以在您的系统或您选择的任何平台上运行 gatsby build。 节点版本为 v14.15.0 ... 预期结果 运行“gatsby build”时，节点模块的 Javascript 包应该正确构建。它可以使用“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\post
css\lib\input.js:123:16)
at Parser.unknownWord (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modul
es\postcss\lib\parser.js:518:22)
at Parser.other (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\pos
tcss\lib\parser.js:149:12)
at Parser.parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\pos
tcss\lib\parser.js:59:16)
at parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\li
b\parse.js:11:12)
at new LazyResult (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\p
ostcss\lib\lazy-result.js:133:16)
at Processor.process (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_module
s\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\no
de_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

Environment
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

Answer 1

问题不在于 postcss 或其他任何东西，它是您正在使用的捆绑器，以防万一似乎是 Webpack。您需要做的是进入您的 webpack 配置文件，找出 css 最小化的位置，可能是您使用 css-minimizer-webpack-plugin 的位置，然后输出必须类似于 [name].[contentHash].css，只需将其重命名为 [name].css。应该可以的