Why am I getting CssSyntaxError: <css input> from PostCSS build?

Question

我正在做我认为是标准的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 但我将其全部删除以找出问题所在。没有变化。

Answer 1

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

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

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

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

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

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

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

最后那个冒号应该是分号。当然，去掉无用的link到不存在的字体就解决了问题。

现在不知道该怪谁了:

Google 错误页面上有语法错误
Google 因为没有运行检查他们的错误页面
Google 用于在找不到字体时返回 400 而不是 404
PostCSS 试图解析错误页面（我不知道 400/404 的东西是否混淆了它，但仍然）
PostCSS 给出了如此晦涩的错误信息
设计师给我一个link一个糟糕的字体

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

Answer 2

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

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

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

Answer 3

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

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

请确保您的权重按升序排列，否则它会从 google 抛出 400 错误并且仍然显示来自 PostCSS

的相同错误

Answer 4

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

前:

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

Post:

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

Why am I getting CssSyntaxError: <css input> from PostCSS build?

Why am I getting CssSyntaxError: <css input> from PostCSS build?

postcss

next.js

google-fonts