如何在Next.js 14项目中引入自定义CSS文件？

根据你的 Pages Router 项目结构，以下是几种引入 CSS 文件的方法：

1. 全局样式引入（适用于 globals.css 和全局生效的 styles.css） #

Next.js 规定，全局 CSS 只能在 pages/_app.tsx 中导入，样式会作用于所有页面和组件。

修改 pages/_app.tsx：

import '../styles/globals.css';
import '../styles/styles.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

这样两个 CSS 文件里的样式会全局生效，所有组件和页面都会继承这些样式。

2. 组件/页面专属样式（推荐用 CSS Modules） #

如果自定义 CSS 只需要作用于特定组件或页面，用 CSS Modules 可以避免样式冲突，Next.js 原生支持这种方式。

操作步骤： #

• 将自定义 CSS 文件命名为 [文件名].module.css，比如给 header.tsx 创建 styles/Header.module.css
• 在组件中导入并使用：

// components/header.tsx
import styles from '../styles/Header.module.css';

export default function Header() {
  return (
    <header className={styles.headerContainer}>
      <h1 className={styles.title}>网站标题</h1>
    </header>
  );
}

CSS Modules 会自动生成唯一类名，彻底解决样式污染问题。

3. 单个页面引入非模块化 CSS（不推荐） #

如果必须在单个页面引入非模块化 CSS（不建议，容易引发全局样式冲突），可以直接在 pages 目录下的页面文件中导入：

// pages/index.tsx
import '../styles/page-specific.css';

export default function Home() {
  return <div>首页内容</div>;
}

注意：这种方式会让样式作用于整个应用，仅在特殊场景使用。

关键注意点 #

• 全局 CSS 只能放在 _app.tsx 中导入，其他组件/页面导入会报错
• CSS Modules 文件必须以 .module.css 结尾，Next.js 才会识别为模块化样式

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