Next.js 不在服务器端渲染中渲染 CSS答案

【问题标题】：Next.js is not rendering CSS in Server Side RenderingNext.js 不在服务器端渲染中渲染 CSS
【发布时间】：2021-06-18 02:54:08
【问题描述】：

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

我注意到imported .css 样式在客户端渲染中正确渲染，但在服务器端渲染中没有。

根据Next.js document 导入的.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"
  }
}

企业社会责任：

SSR

【问题讨论】：

您是否使用本地 http 服务器来托管 SSR 版本？

标签： javascript css next.js server-side-rendering

【解决方案1】：

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

文档说明了这一点：if you disable JavaScript the CSS will still be loaded in the production build (next start). During development, we require JavaScript to be enabled to provide the best developer experience with Fast Refresh.

Reference

【讨论】：

我刚刚进行了下一个构建，并开始检查生产构建。还是同样的问题。
我创建了一个新的下一个项目，并且还进行了下一个构建和下一次启动，样式已加载。你用的是什么版本？
我应该更好地阅读文档，但为这些信息欢呼
嘿@sravis，你找到解决方案了吗？
这对我有用。正在破坏我的大脑，为什么这在本地不起作用

【解决方案2】：

我可以通过删除此行来重现您共享的这个损坏的 CSS：

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

而不是：

import '../styles/globals.css'

【讨论】：

当然，你应该把空样式对象留在那里。