Next.js执行npm run build报错：CSS文件存在未知语法问题

错误现象 #

执行npm run build构建项目时失败，过程中先出现punycode模块弃用警告，随后因CSS语法错误触发webpack报错，终止构建。具体执行与报错输出如下：

npm run build

current@0.1.0 build
next build

▲ Next.js 14.2.15

• Environments: .env

正在创建优化的生产构建...
(node:10710) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
(node:10732) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
编译失败。

HookWebpackError: /Users/pratikmishra/Desktop/current/static/css/3d055d199bf4c760.css:29:22: Unknown word
at makeWebpackError (/Users/pratikmishra/Desktop/current/node_modules/next/dist/compiled/webpack/bundle5.js:28:312635)
at /Users/pratikmishra/Desktop/current/node_modules/next/dist/compiled/webpack/bundle5.js:28:106060
at eval (eval at create (/Users/pratikmishra/Desktop/current/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), :44:1)
-- 内部错误 --
CssSyntaxError: /Users/pratikmishra/Desktop/current/static/css/3d055d199bf4c760.css:29:22: Unknown word
at Input.error (/Users/pratikmishra/Desktop/current/node_modules/next/node_modules/postcss/lib/input.js:106:16)
at ScssParser.unknownWord (/Users/pratikmishra/Desktop/current/node_modules/next/node_modules/postcss/lib/parser.js:594:22)
at ScssParser.other (/Users/pratikmishra/Desktop/current/node_modules/next/node_modules/postcss/lib/parser.js:436:12)
at ScssParser.parse (/Users/pratikmishra/Desktop/current/node_modules/next/node_modules/postcss/lib/parser.js:471:16)
at scssParse (/Users/pratikmishra/Desktop/current/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/Users/pratikmishra/Desktop/current/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/Users/pratikmishra/Desktop/current/node_modules/next/node_modules/postcss/lib/processor.js:53:14)
at CssMinimizerPlugin.optimizeAsset (/Users/pratikmishra/Desktop/current/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:48:12)
at /Users/pratikmishra/Desktop/current/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:79:55
at async Span.traceAsyncFn (/Users/pratikmishra/Desktop/current/node_modules/next/dist/trace/trace.js:154:20)
由Compilation.hooks.processAssets中的插件导致
CssSyntaxError: /Users/pratikmishra/Desktop/current/static/css/3d055d199bf4c760.css:29:22: Unknown word
at Input.error (/Users/pratikmishra/Desktop/current/node_modules/next/node_modules/postcss/lib/input.js:106:16)
at ScssParser.unknownWord (/Users/pratikmishra/Desktop/current/node_modules/next/node_modules/postcss/lib/parser.js:594:22)
at ScssParser.other (/Users/pratikmishra/Desktop/current/node_modules/next/node_modules/postcss/lib/parser.js:436:12)
at ScssParser.parse (/Users/pratikmishra/Desktop/current/node_modules/next/node_modules/postcss/lib/parser.js:471:16)
at scssParse (/Users/pratikmishra/Desktop/current/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/Users/pratikmishra/Desktop/current/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/Users/pratikmishra/Desktop/current/node_modules/next/node_modules/postcss/lib/processor.js:53:14)
at CssMinimizerPlugin.optimizeAsset (/Users/pratikmishra/Desktop/current/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:48:12)
at /Users/pratikmishra/Desktop/current/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:79:55
at async Span.traceAsyncFn (/Users/pratikmishra/Desktop/current/node_modules/next/dist/trace/trace.js:154:20)

Build failed because of webpack errors

解决步骤 #

1. 修复CSS语法错误（核心原因） #

报错指向/Users/pratikmishra/Desktop/current/static/css/3d055d199bf4c760.css第29行第22位的未知语法，按以下方式排查：

• 打开该CSS文件，定位对应行，检查是否有拼写错误、未闭合的括号/引号、非法字符或不符合CSS规范的语法
• 若该文件是编译生成的临时文件，溯源到项目中的源CSS/SCSS文件（组件内样式、全局样式等），排查源文件的语法问题
• 若使用SCSS等预处理器，检查是否存在未正确编译的变量、混合宏或嵌套语法

2. 处理punycode弃用警告（非直接失败原因） #

该警告不影响构建，但可通过以下方式消除：

• 执行node --trace-deprecation npm run build定位依赖中使用punycode的包
• 升级对应依赖包到最新版本，多数主流包已替换punycode为社区替代方案
• 若无法升级依赖，手动安装punycode.js，并通过webpack别名或模块重定向替换内置punycode

3. 验证修复效果 #

修复后重新执行构建，若仍报错，清理Next.js缓存后重试：

rm -rf .next
npm run build

内容的提问来源于stack exchange，提问作者pratik mishra