Next.js构建失败：全局CSS导入错误及Webpack报错排查

在Vercel构建Next.js项目时触发Webpack错误，核心原因是comps/Hero.js中直接导入全局CSS文件./styles/hero.css违反Next.js规则——全局CSS仅允许在pages/_app.js中导入，或转换为CSS Modules使用。以下是错误日志：

Cloning github.com/branexists/nextjs (Branch: main, Commit: 30c148b)
Cloning completed: 1.626s
Build cache restored
Running "vercel build"
Vercel CLI 28.4.14
Installing dependencies...
up to date in 498ms
80 packages are looking for funding
  run `npm fund` for details
Detected Next.js version: 13.0.2
Detected `package-lock.json` generated by npm 7+...
Running "npm run build"
> nextjs@0.1.0 build
> next build
info  - Linting and checking validity of types...
info  - Creating an optimized production build...
(node:318) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
Failed to compile.
./styles/hero.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: comps/Hero.js
Import trace for requested module:
./styles/hero.css
./comps/Hero.js
./styles/hero.css
Module build failed: Error: Final loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) didn't return a Buffer or String
    at processResult (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:395049)
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:396519
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:283578
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280385)
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280470)
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280699
    at runSyncOrAsync (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:279045)
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280602)
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280244
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:395994
Import trace for requested module:
./styles/hero.css
./comps/Hero.js
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1

方案一：将全局CSS移至pages/_app.js导入 #

1. 删除comps/Hero.js中的import './styles/hero.css'语句
2. 在pages/_app.js中添加全局样式导入：

   import '../styles/hero.css' // 路径根据项目结构调整
   
   function MyApp({ Component, pageProps }) {
     return <Component {...pageProps} />
   }
   
   export default MyApp
   

3. Hero组件直接使用CSS中定义的类名即可，比如<div className="hero-banner">

方案二：转换为CSS Modules（组件专属样式） #

1. 重命名styles/hero.css为styles/Hero.module.css（必须遵循[文件名].module.css命名规则）
2. 在comps/Hero.js中修改导入方式：

   import styles from '../styles/Hero.module.css'
   

3. 在组件中通过styles对象调用类名：
   • 若CSS类名为短横线分隔（如hero-container），使用数组访问：

     <div className={styles['hero-container']}></div>
     

   • 若改为驼峰命名（如heroContainer），可直接调用：

     <div className={styles.heroContainer}></div>
     

注意事项 #

• CSS Modules会自动生成唯一类名，彻底避免组件间样式冲突
• 第三方库的全局CSS（如UI框架基础样式）仍需在pages/_app.js中导入

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