Next.js 未在服务器端渲染中渲染 CSS

Question

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

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

根据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"
  }
}

企业社会责任：

固态继电器

Answer 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. 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.

参考

Answer 2

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

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

并不是：

import '../styles/globals.css'