Next.js在服务器端渲染时未能渲染CSS。

Question

我使用npx create-next-app创建了next.js应用程序，并没有对其进行任何更改。

我发现在客户端渲染时，引入的.css样式被正确地呈现出来，但是在服务器端渲染时却没有。

根据Next.js文档，导入的.css应该可以正常工作。 _app.js

import '../styles/globals.css'

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

export default MyApp

package.json

{
  "name": "next-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.0.9",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }
}

CSR：

SSR：

- sravis

---

你是否使用本地 HTTP 服务器来托管 SSR 版本？ - danieltan95

Answer 1

如果您不处于生产模式，这是正常行为。

文档说明了这一点：如果禁用JavaScript，则CSS仍将在生产构建（下一个启动）中加载。在开发过程中，我们需要启用JavaScript以提供最佳的Fast Refresh开发人员体验。 参考资料

- enoch

---

我刚刚进行了下一次构建和下一次启动以检查生产构建。仍然存在相同的问题。 - sravis

我创建了一个新的项目，同时进行了构建和启动，样式已经加载。你使用的是哪个版本？ - enoch

我应该更好地阅读文档，但感谢您提供这些信息。 - jackstride

嘿，@sravis，你解决这个问题了吗？ - insivika

这对我有效。我一直在琢磨为什么本地环境下无法正常工作。 - Low

Answer 2

我可以通过删除这行代码来复现你分享的这个有问题的 CSS：

// pages/index.js
import styles from '../styles/Home.module.css'

而不是：

import '../styles/globals.css'

- armin yahya

---

当然，你应该将样式对象留空。 - armin yahya

命名导入到对象中不起作用 :( - MatanCo