使用基本的CSS样式表在Next.js中获取FOUC

由 发布于

I'm importing my stylesheet in a custom /pages/_app.js file, however, I get a FOUC on page refresh. I've tried explicitly calling the file inside <Head> tag but that didn't work either. Also, might be worth mentioning that I'm using a component-level CSS approach for my individual components (Component.module.scss) - unsure if this affects anything.

我是Next.js的新手，所以不确定是否遗漏了任何明显的内容。由于我没有主意，任何帮助将不胜感激。谢谢！

The _app.js file:

import Head from "next/head"

import "../styles/styles.scss"
import { FirebaseContextProvider } from "../context/FirebaseContext"
import DefaultLayout from "../layouts/Default"

export default function MyApp({ Component, pageProps }) {
  const defaultTitle = "Site Name"
  const defaultDescription = "Description goes here."

  const Layout = Component["layout"] || DefaultLayout
  const Title = Component["title"] || defaultTitle
  const Description = Component["description"] || defaultDescription

  return (
    <FirebaseContextProvider>
      <Layout>
        <Head>
          <title>{Title}</title>
          <link rel="icon" href="/favicon.ico" />
          <meta name="description" content={Description}></meta>
        </Head>
        <Component {...pageProps} />
      </Layout>
    </FirebaseContextProvider>
  )
}

Part of the styles.scss file:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import "./_variables.scss";

html,
body {
  padding: 0;
  margin: 0;
  font: 14px $font-stack;
  font-weight: 300;
}

* {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}