到目前為止，樣式化發(fā)生在兩個(gè)地方:global.css + index.js通過(guò)樣式化組件

問(wèn)題 啟動(dòng)或重啟本地服務(wù)器+手動(dòng)頁(yè)面刷新后，所有樣式都將按預(yù)期應(yīng)用。此外，風(fēng)格的變化是迅速適用的。 現(xiàn)在，如果執(zhí)行另一次手動(dòng)頁(yè)面刷新，則只應(yīng)用global.css中的樣式，但最初不會(huì)加載index.js文件中的樣式。 global.css以外的樣式只有兩種方式有效:

單擊其中一個(gè)鏈接，然后單擊返回按鈕(第二個(gè)屏幕截圖) 重啟本地服務(wù)器+頁(yè)面刷新 我記錄了我做的步驟。抱歉，有呼吸聲。 https://www.youtube.com/watch?v=cp-97ZYsQhw

我添加代碼片段只是為了更好地概述代碼。我試圖在codesandbox上設(shè)置一個(gè)工作示例。

問(wèn)題 為什么next.js只加載global.css，而忽略css較多的index.js，直到要么重啟本地服務(wù)器，要么點(diǎn)擊某些鏈接？

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>

我在v13.3.4中遇到過(guò)類(lèi)似的問(wèn)題，將我的global.css文件加載到客戶(hù)端組件中解決了這個(gè)問(wèn)題。雖然不確定這是否是官方的解決方案。