✅解决，请在下面查看我的回复！
我正在将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;
GitHub存储库：https://github.com/jesperlindstrom/next-sass-fouc/
问题视频：https://drive.google.com/file/d/12yukgmgsuPKRs0TD2yYZK9F7fBC7oSkF/view?usp=sharing
我究竟做错了什么？谢谢！
最佳答案
所以...问题原来是浏览器错误，根本与Next或Webpack不相关。可以使用普通CSS和HTML复制，并在加载时触发转换。解决方案听起来很愚蠢，但解决了它：在中导入一个空的.js文件。我猜测这会使两个资源都“阻塞”，因此等待第一次渲染。
如果有人在Next.js中遇到相同的问题，则将其添加到_document.js中：
<Head>
...
<script src="/static/chrome-fix.js" />
</Head>
...并将
chrome-fix.js作为空文件放在/ static中。更多信息：https://bugs.chromium.org/p/chromium/issues/detail?id=332189
关于webpack - next-sass:仅在进行生产时才闪烁未样式化的内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55316262/