为什么我从 PostCSS 构建中收到 CssSyntaxError: <css input>？答案

【问题标题】：Why am I getting CssSyntaxError: <css input> from PostCSS build?为什么我从 PostCSS 构建中收到 CssSyntaxError: <css input>？
【发布时间】：2021-08-28 19:57:39
【问题描述】：

我正在做我认为的标准 Next.js 构建。它在开发模式下工作正常，但是当我尝试获得生产版本时，我得到：

(node:39333) UnhandledPromiseRejectionWarning: CssSyntaxError: <css input>:17:20: Missed semicolon
at Input.error (/node_modules/next/node_modules/postcss/lib/input.js:129:16)

但奇怪的是：我没有任何 CSS。

实际上，我有一些 CSS，但我将其全部删除以找出问题所在。没有变化。

【问题讨论】：

标签： next.js postcss google-fonts

【解决方案1】：

以下代码解决了我的问题。

前：

                    <link
                        href="https://fonts.googleapis.com/css2?family=Monserat:wght@300;400;500;900&display=swap"
                        rel="stylesheet"
                    />

发帖：

                    <link
                        href={`https://fonts.googleapis.com/css2?family=Monserat:wght@300;400;500;900&display=swap`}
                        rel="stylesheet"
                    />

【讨论】：

【解决方案2】：

对于仍然无法理解问题或找出错误所在的人，请检查任何链接，例如

<link
        href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
        rel="stylesheet"
      />

请确保您的权重按升序，否则它会从 google 抛出 400 错误，但仍会从 PostCSS 显示相同的错误

【讨论】：

【解决方案3】：

经过一个小时左右的挫折后，我做了前 10 分钟应该做的事情，并编辑了文件 postcss/lib/input.js 以打印出有问题的 CSS，结果让我大吃一惊。让我按照事件发生的顺序来描述事件的顺序，而不是我发现它们的顺序。

几天前，我从设计师那里收到了一个 HTML 文件，其中包含她想要的布局。在<head>中，有一些<link>s对她选择的字体，包括：

<link
        href="https://fonts.googleapis.com/css?family=FontAwesome"
        rel="stylesheet"
  />

我没有注意到（显然设计师也没有注意到）是没有这样的字体系列（FontAwesome 是字体的名称 toolkit），我尽职尽责地将这行复制到我的反应代码。 Next.js 和浏览器解决了这个问题。

PostCSS 没有。相反，在尝试生产构建时，它尝试解析 Google 发送的错误页面。

不幸的是，错误页面只是一个错误页面。谷歌没有人仔细检查过它是否符合严格的标准。果然，在我发现的顶部附近：

     body {
       background: 100% 5px no-repeat;
       margin-top: 0;
       max-width: none:

末尾的冒号应该是分号。当然，删除指向不存在字体的无用链接解决了问题。

现在我不知道该怪谁：

Google 在错误页面上出现语法错误
Google 没有对其错误页面进行检查
Google 在找不到字体时返回 400 而不是 404
PostCSS 用于尝试解析错误页面（我不知道 400/404 是否混淆了它，但仍然）
PostCSS 提供了如此晦涩的错误信息
设计师给了我一个坏字体的链接

因为，你知道我不是在责备自己...

【讨论】：

【解决方案4】：

在你的 Next.js 应用中试试这个：

<Head>
    <link
        href="https://fonts.googleapis.com/css2?family=Petrona"
        rel="stylesheet"
    />
</Head>

请注意，您的代码和我的代码之间的唯一区别是：css2

【讨论】：

css2 的错误页面似乎有同样的问题。