Next.js中如何实现CSS按页面按需导入？

1. 移除全局CSS注入 #

首先修改_document.js，删除所有本地CSS的<link>标签（仅保留全局必需的资源如font-awesome）——因为_document.js是全局文档模板，这里的资源会被所有页面加载：

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css" integrity="sha512-xX2rYBFJSj86W54Fyv1de80DWBq7zYLn2z0I9bIhQG+rxIF6XVJUpdGnsNHWRa6AvP89vtFupEPDP8eZAtu9qA==" crossOrigin="anonymous" referrerPolicy="no-referrer" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

2. 页面级按需导入CSS的正确方式 #

Next.js支持在页面组件中直接导入CSS文件，自动实现代码分割（仅访问该页面时加载对应CSS），解决路径问题有两种方案：

方案一：使用正确的相对路径 #

假设你的项目结构如下：

┌─ styles/
│  └─ settings.css
└─ pages/
   ├─ index.js
   └─ pagehere/
      └─ index.js

在pages/pagehere/index.js中，需通过相对路径定位到根目录下的styles文件夹，正确导入代码为：

import '../../styles/settings.css'

export default function PageHere() {
  return <div>你的页面内容</div>
}

路径层级规则：../表示向上一级目录，从pagehere文件夹出发，需两次../回到项目根目录，再进入styles文件夹。

方案二：配置路径别名（推荐） #

如果不想每次计算相对路径，可通过配置别名简化导入：

1. 在项目根目录创建jsconfig.json（JS项目）或tsconfig.json（TS项目）：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/styles/*": ["styles/*"]
    }
  }
}

2. 重启Next.js开发服务，之后任何页面都可以用别名导入CSS：

import '@/styles/settings.css'

export default function PageHere() {
  return <div>你的页面内容</div>
}

3. 可选：使用CSS Modules避免样式污染 #

如果需要确保页面样式不会影响其他组件/页面，可使用Next.js的CSS Modules功能：

1. 将CSS文件命名为settings.module.css
2. 在页面中导入并使用：

import styles from '@/styles/settings.module.css'

export default function PageHere() {
  return <div className={styles.container}>你的页面内容</div>
}

CSS Modules会自动为样式类名添加唯一哈希值，确保样式作用域仅当前组件/页面。

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