Mal*_*lio 2 postcss next.js google-fonts
我正在做我认为标准的 Next.js 构建。它在开发模式下工作正常，但当我尝试获得生产版本时，我得到：
\n(node:39333) UnhandledPromiseRejectionWarning: CssSyntaxError: <css input>:17:20: Missed semicolon\nat Input.error (/node_modules/next/node_modules/postcss/lib/input.js:129:16)\n但奇怪的是：我没有\xe2\x80\x99t 有任何CSS。
\n实际上，我有一些 CSS，但我将其全部删除以找出问题所在。不用找了。
\n经过一个小时左右的沮丧之后，我做了我应该在前 10 分钟内完成的事情，并编辑了文件postcss/lib/input.js以打印出有问题的 CSS，结果让我大吃一惊。让我按照事件发生的顺序来描述事件的顺序，而不是我发现它们的顺序。
几天前，我收到了设计师发来的 HTML 文件，其中包含她想要的布局。在 中<head>，有一些<link>她选择的字体的 s，包括：
<link\n href="https://fonts.googleapis.com/css?family=FontAwesome"\n rel="stylesheet"\n />\n我没有\xe2\x80\x99t注意到（显然设计者也没有\xe2\x80\x99t）是没有这样的字体系列（FontAwesome是字体工具包的名称），我尽职地将这一行复制到我的React中代码。Next.js 和浏览器解决了这个问题。
\nPostCSS 没有。相反，当尝试生产构建时，它尝试解析Google 发送的错误页面。
\n不幸的是，你知道，错误页面只是一个错误页面。谷歌没有人对其严格的标准合规性进行审查。果然，在顶部附近我发现：
\n body {\n background: 100% 5px no-repeat;\n margin-top: 0;\n max-width: none:\n最后的冒号应该是分号。当然，删除指向不存在字体的无用链接解决了问题。
\n现在我不知道该怪谁：
\n因为，你知道我并没有责怪自己......
\n小智 5
对于仍然无法理解问题或找出错误所在的人，请检查是否有任何链接，例如
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet"
/>
请确保你的权重按升序排列，否则谷歌会抛出400错误，并且 PostCSS 仍然显示相同的错误
| 归档时间： |
|
| 查看次数： |
4393 次 |
| 最近记录： |