Next.js 13根布局无法导入global.css文件的问题求助

问题原因 #

你遇到的错误是因为Next.js 13 App Router的全局CSS导入规则与传统Pages Router不同，同时你的根布局缺少App Router要求的顶层<html>和<body>标签，此外可能存在Tailwind或PostCSS配置缺失的问题。

修复步骤 #

1. 修正根布局结构 #

App Router要求根layout.js必须作为整个应用的顶层容器，包裹<html>和<body>标签，修改你的app/layout.js代码：

import React from "react";
import Link from "next/link";
import "../styles/global.css";

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <nav className="w-full h-20 bg-white border-b border-gray-300">
          <ul className="w-40 h-20 p-4 flex justify-between items-center list-none">
            <li>
              <Link href="/blog">Blog</Link>
            </li>
            <li>
              <Link href="/projects">Projects</Link>
            </li>
            <li>
              <Link href="/books">Books</Link>
            </li>
          </ul>
        </nav>
        <main>{children}</main>
      </body>
    </html>
  );
}

2. 检查并完善Tailwind配置 #

确保项目根目录的tailwind.config.js正确包含app和styles目录的扫描路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./styles/**/*.css",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. 添加/完善PostCSS配置 #

项目根目录创建或修改postcss.config.js，确保Tailwind指令能被正确解析：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. 清理冲突的路由文件（若存在） #

如果你的项目中同时存在pages目录（尤其是pages/_app.js），会触发Pages Router的全局CSS规则限制。建议删除pages目录（若未使用），或把全局CSS导入移至pages/_app.js（不推荐混合两种路由系统）。

5. 重启开发服务器 #

修改配置后，必须终止当前开发服务，重新执行npm run dev或yarn dev，让新配置生效。

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