Next.js 构建无法编译（HookWebpackError：<css input>：61：1：缺少分号）

Question

问题：

next.js 无法运行构建命令，即使我可以毫无问题地在开发模式下运行它。它说 css 中缺少分号。当然没有，如果有的话也无法在开发模式下编译。对于一般信息，我在这个项目中使用 css 模块。所以我所有的 css 都是 name.module.css。

这是控制台给出的警告，它是整个堆栈跟踪。如果我运行 --debug 标志也不会改变。我正在运行

npm run build

，它对应于我的 package.json 中的脚本

"build": "next build"

。

> [email protected] build
> next build

info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
Failed to compile.

HookWebpackError: <css input>:61:1: Missed semicolon


> Build error occurred
Error: > Build failed because of webpack errors
    at /Users/name/Documents/coding_files/personal_projects/projectName/node_modules/next/dist/build/index.js:17:924
    at async Span.traceAsyncFn (/Users/name/Documents/coding_files/personal_projects/projectName/node_modules/next/dist/telemetry/trace/trace.js:6:584)

我尝试过的：

首先我在这里查找问题。我发现了一些类似错误的帖子。

第 1 篇文章 来自帖子澄清：这是我显示的完整堆栈跟踪。

第 2 篇文章 我运行了

npm install

，但没有发现任何可更新的内容。并将我的导入更改为

"next/app"

。也没有帮助。

除了帖子之外，我还深入研究了 node_modules 中的 next.js 代码，试图了解发生了什么，但我一无所获，因为它是一个 webpack 的东西，而我没有意识到。我还看到另一篇我找不到的帖子说有时导入谷歌字体时会发生此错误，所以我注释掉了所有谷歌字体，但这种情况仍然发生。我不太明白它如何在构建时给出错误，但在开发时却不会给出错误。

结束思考

我怀疑某些东西正在被导入到某个文件中，因为这似乎是我读过的另一篇文章（我找不到的文章）中的问题，但是我找不到它。这个问题或者我缺少 next.config.js 文件导致了这个问题（我是 next.js 初学者）。另外，我正在使用打字稿，如果有帮助的话。

非常感谢任何帮助。

谢谢大家😄

Answer 1

我遇到了同样的错误。为了解决这个问题，我评论了所有将其 scss 文件拉入我怀疑导致问题的组件中的组件导入。然后我开始一一取消注释组件，找到了导致错误的组件。然后我注释掉了它的 scss 文件内容，并开始依次取消注释样式，终于找到了导致此问题的行。

在我的例子中，这是动画 CSS 属性的参数顺序错误。