到目前为止，样式发生在两个地方：global.css+index.js通过样式组件
启动或重新启动本地服务器+手动页面刷新后，所有样式均按预期应用。风格的变化也会立即应用。
现在，如果执行另一次global.css手动页面刷新，则仅应用来自的样式，但index.js最初不会加载来自文件的样式。以外的样式global.css仅通过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> …