css - 在 Next.js 中加载关键 CSS

Question

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

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

谢谢!

Answer 1

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

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

import '@thirdparty/dist/styles.css'

//Foo.js 组件与你的模块 css

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

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