Next.js 13中如何为pages文件夹应用全局CSS样式？

Next.js 13的App Router（app目录）和Pages Router（pages目录）采用独立的样式加载逻辑，app目录下的global.css只会被App Router的根布局引入，不会自动覆盖Pages Router的页面。以下是两种实用的解决办法：

方法一：在Pages Router入口文件中单独引入全局样式 #

Pages Router的全局入口是pages/_app.js/tsx，如果没有这个文件就新建一个，在文件中直接引入app目录下的全局样式：

// pages/_app.js
import '../app/global.css'
// 若配置了路径别名，也可以写成 import '@/app/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

这样Pages目录下的所有页面都会加载该全局样式。

方法二：统一全局样式文件位置，双路由系统分别引入 #

把global.css移到项目根目录的统一位置（比如styles/global.css），然后在两个路由系统的入口分别引入：

• App Router：在app/layout.js/tsx中添加 import '@/styles/global.css'
• Pages Router：在pages/_app.js/tsx中添加 import '@/styles/global.css'
  这种方式能更方便地统一管理全局样式，避免路径混乱。

额外注意事项 #

• 不要在Pages Router的单个页面中重复引入全局样式，否则会导致样式重复加载，引发样式冲突。
• 如果使用Tailwind CSS，需要在tailwind.config.js中确保同时包含app和pages目录的路径，保证样式能覆盖两个路由系统的组件：

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

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