javascript - Next.js 不在服务器端渲染中渲染 CSS

Question

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

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

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

_app.js

import '../styles/globals.css'

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

export default MyApp

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

参考

Answer 2

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

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

并不是：

import '../styles/globals.css'