<style> 在 NextJS 中运行构建后，如何在标签中获取全局样式？

Question

我有一个问题与我的NextJS项目。当我运行"yarn dev"时，我在<style>标签内获得全局样式，我需要它们用于页面性能，并在页面加载时停止布局转移。但是当我运行"纱线构建"，然后是"纱线启动"，全局样式最终在<link rel='stylesheet' href... />标签中结束。这就是我的问题。下面是我的代码:

_app.js

import Layout from '../components/Layout'
import '../styles/globals.css'
import '../styles/header.scss'
import '../styles/nav.scss'
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
export default MyApp

包安装

├── next@10.2.3
├── react-dom@17.0.2
├── react-responsive@8.2.0
├── react@17.0.2
├── sass@1.37.5
├── styled-components@5.3.0
└── swiper@6.5.3

我一直在阅读，发现提到了'next.config.js'。我没有这样的配置文件在我的项目目前…这是我需要的东西，还是我还遗漏了什么?

我第一次使用React和NextJS，所以任何帮助都会非常感激。由于

Answer 1

解决方案包括创建或修改_document.jsx_或_document.js，并实现collectStyles来呈现页面上的内联样式。

Next存储库中的这个示例演示了应用程序被collectStyles包装并内联呈现样式的过程。

https://github.com/vercel/next.js/blob/master/examples/with-styled-components/pages/_document.js

注意:这收集了所有的样式元素是你的应用程序的子，有选择地包括global.css，你必须查看样式组件的API和解析通过sheet.getStyleElement()可能。

Answer 2

找到了使用有样式组件的解决方案，参见createGlobalStylehttps://scalablecss.com/styled-components-global-styles/