在 Next.js 中加载关键 CSS

【问题标题】：Loading critical CSS in Next.js在 Next.js 中加载关键 CSS
【发布时间】：2021-04-16 14:45:51
【问题描述】：

Next.js 中有没有办法将每个页面的关键 CSS 和非关键 CSS 分开并异步加载非关键？

我在我的页面和组件中使用样式化组件 + 几个外部 css 库。

谢谢！

【问题讨论】：

【解决方案1】：

您可以使用模块 css，但不能使用全局。全局样式只能在 _app.js 中使用，但您可以导入内置功能的“模块”css。这是你的意思吗？

// Foo.js 组件需要第三方

import '@thirdparty/dist/styles.css'

// Foo.js 组件，带有来自你的 css 模块

import styles from "./Foo.module.css";

如果这不是您想要的，我深表歉意。我不完全确定您需要什么。

【讨论】：