Gatsby构建失败，因为在postcss和CSS -minimizer- on plugin上的css最小器出现“未知单词”错误
当我使用'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，并将它们重新安装为dev依赖项--这不起作用；我卸载了css-minimizer-css plugin-plugin，并将其重新安装为dev依赖项--也没有起作用。
请注意:在我卸载postcss之后，我再次运行build，这样它就可以使用node_modules/gatsby文件夹中的postcss包，就像node_modules/gatsby/node_modules/postcss一样，这也不起作用。
我的Node版本是: v14.15.0我的开发依赖安装的webpack版本是:其他一切都可以在github轻量级再现库中找到：
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回答 1
Stack Overflow用户
发布于 2021-10-08 14:51:12
问题不在于postcss或其他任何东西，而是你正在使用的绑定器，以防出现问题的似乎是Webpack。你需要做的是进入你的webpack配置文件，找出css最小化的地方，可能是你正在使用css-minimizer-webpack-plugin的地方，然后输出必须像[name].[contentHash].css一样，只需将其重命名为[name].css。这应该是可行的
https://stackoverflow.com/questions/69497711
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号