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'