✅解决，请在下面查看我的回复！

Question

我正在将Next.js与next-sass一起使用。我整天都在挣扎着未样式化内容“ FOUC”的问题，测试了我在网上找到的各种解决方案，但似乎没有一个适合我。使用CSS过渡时，该问题尤其明显，因为这些组件将在不使用任何样式的情况下可见，然后过渡到其CSS样式。

这仅在使用next build然后使用next start进行生产构建时可见。在开发模式下，使用next，没有FOUC问题。

最小示例：

// next.config.js
const withSass = require('@zeit/next-sass');
module.exports = withSass();

// scss/style.scss
body {
    background-color: red;
    transition: 2s all ease;
}

// pages/index.js
import React from "react";
import "../scss/style.scss";

const Home = () => (
  <div>Test</div>
);

export default Home;

我在做什么错？谢谢！

Answer 1

所以...这个问题原来是浏览器错误，根本与Next或Webpack不相关。可以使用普通CSS和HTML复制，并在加载时触发转换。解决方案听起来很愚蠢，但解决了它：在中导入一个空的.js文件。我猜测这会使两个资源都“阻塞”，因此等待第一次渲染...

如果在Next.js中有人遇到相同的问题，我将其添加到_document.js中：

<Head>
...
<script src="/static/chrome-fix.js" />
</Head>

......并将chrome-fix.js作为一个空文件放在我的/ static中。