Next.js 仅在手动页面刷新后加载 global.css。另一个现有的 styles.js 被忽略

Question

到目前为止，样式发生在两个地方：global.css+index.js通过样式组件

问题

启动或重新启动本地服务器+手动页面刷新后，所有样式均按预期应用。风格的变化也会立即应用。
现在，如果执行另一次global.css手动页面刷新，则仅应用来自的样式，但index.js最初不会加载来自文件的样式。以外的样式global.css仅通过2种方式生效：

1. 单击其中一个链接 + 单击重新调整按钮（第二张屏幕截图）
2. 重启本地服务器+页面刷新

我记录了我所做的步骤。抱歉呼吸声。
https://www.youtube.com/watch?v=cp-97ZYsQhw

我添加代码片段只是为了更好地概述代码。我正在尝试在codesandbox 上设置一个工作示例。

问题

为什么next.js只加载global.css，而忽略具有更多css的index.js，直到本地服务器重新启动或单击某些链接？

import Link from "next/link";
import styled from 'styled-components';

const StyledMain = styled.main`
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-content: center;
`;

const StyledLi = styled.li`
    font-size: var(--fontsize-profileButtons);
    text-align: center;
    list-style: none;
    margin: 50px 0; 
`;

export default function Home() {
    return (
        <>
            <StyledMain>
                <ul>
                    <StyledLi>
                        <Link href="/about">about</Link>
                    </StyledLi>
                    <StyledLi>
                        <Link href="/projects">projects</Link>
                    </StyledLi>
                    <StyledLi>
                        <Link href="/blog">blog</Link>
                    </StyledLi>
                </ul>
            </StyledMain>
        </>
    )
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body {
  width: 100vw;
  height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

页面刷新后的样子index.js+它应该是什么样子

还可以在其中加载 css 代码的过程index.js

Answer 1

我在 v13.3.4 中遇到了类似的问题，并将我的 global.css 文件加载到客户端组件中解决了这个问题。但不确定这是否是官方解决方案。