React+Next.js项目中CSS文件无法加载问题排查

问题根源 #

你在_document.js的<Head>里使用相对路径../styles/css/style.css引用本地CSS文件，这不符合Next.js的资源加载规则：Next.js不会把styles目录当作静态资源目录，且_document.js中不推荐用这种方式加载项目内的CSS。

三种可行的解决办法 #

1. 全局CSS导入（官方推荐） #

Next.js规定全局CSS必须在_app.js中导入，而非_document.js：

• 在pages目录下创建或编辑_app.js
• 直接导入你的CSS文件：

import '../styles/css/style.css'

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

2. 移至public目录加载 #

如果坚持用<link>标签加载，需将CSS文件放到项目根目录的public文件夹（无则新建），然后修改_document.js的路径：

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

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link
            rel="stylesheet"
            href="/styles/css/style.css"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

注意：此时CSS文件路径应为public/styles/css/style.css

3. CSS Modules（组件级样式） #

如果是组件专属样式，推荐使用CSS Modules，避免样式污染：

// 组件文件中导入
import styles from '../styles/css/MyComponent.module.css'

export default function MyComponent() {
  return <div className={styles.wrapper}>组件内容</div>
}

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