时间戳

首页 > 解决方案 > 使用基本的 scss 样式表在 Next.js 中获取 FOUC

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

问题描述

我将我的样式表导入到自定义/pages/_app.js文件中，但是，我在页面刷新时得到了 FOUC。我已经尝试在<Head>标签内显式调用文件，但这也不起作用。此外，可能值得一提的是，我正在为我的各个组件（）使用组件级 CSS 方法Component.module.scss——不确定这是否会影响任何事情。

我是 Next.js 的新手，所以我不确定我是否遗漏了任何明显的东西。任何帮助将不胜感激，因为我没有想法。谢谢！

_app.js文件：

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>
  )
}

部分styles.scss文件：

@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;
}

标签： javascriptcssreactjssassnext.js

解决方案

推荐阅读