时间戳

首页 > 解决方案 > FOUC：没有任何样式加载的初始页面

javascript - FOUC：没有任何样式加载的初始页面

问题描述

我正在尝试通过为 Nextjs 应用程序导入.scss文件来应用全局样式。_app.js

但问题是，样式并没有在页面加载时预先应用。因此，所有初始页面渲染都会发生 FOUC。

示例 1

下面给出的是上述问题的基本版本：

项目结构：

pages/
    _app.js
    index.js
app.scss
package.json

index.js文件：

export default function Home() {
  return (
    <div className="hello">
      <p>Hello World</p>
    </div>
  );
}

_app.js文件：

import "../app.scss";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

app.scss文件：

 $color: red;

 .hello {
     background-color: lavender;
     padding: 100px;
     text-align: center;
     transition: 100ms ease-in background;

     &:hover {
         color: $color;
     }
 }

package.json文件：

{
  "name": "basic-css",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^9.4.5-canary.31", // using canary build as per https://github.com/vercel/next.js/issues/11195
    "node-sass": "4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "license": "ISC"
}

示例 2（使用 next-sass 的 repo）

根据@Ramakay 的回答的第三点， 它创建了一个静态散列 css 文件并将其附加到<head/>标签，但问题仍然存在。

我所期待的：

在此处输入图像描述

我现在得到的：

在此处输入图像描述

我没有使用任何外部库，如“styled-components”等。我也没有在寻找它。

我能做些什么来解决手头的问题？

标签： javascriptreactjssassnext.jsfouc

解决方案

因为这是 JS 中的 CSS 方法，所以文件不会在服务器端呈现以供文档预解析器应用，因此它必须等待 Javascript 下载

  1. 您可以使用 Nextjs 产品 - https://github.com/vercel/styled-jsx - 它将输出样式服务器以及客户端。
  2. 您可以查看单独导出 SCSS 并链接到文档头。
  3. Next-sass 与 Node-sass 输出文件 - https://github.com/vercel/next-plugins/tree/master/packages/next-sass + https://github.com/sass/node-sass#outfile

推荐阅读