Webpack next sass：仅在为生产构建时才闪现未设置样式的内容 ✅ 已解决，请参阅下面的答复！_Webpack_Next.js

Webpack next sass：仅在为生产构建时才闪现未设置样式的内容 ✅ 已解决，请参阅下面的答复！

webpack next.js

Webpack next sass：仅在为生产构建时才闪现未设置样式的内容 ✅ 已解决，请参阅下面的答复！,webpack,next.js,Webpack,Next.js,我将Next.js与Next sass一起使用。我一整天都在为一个非风格内容“FOUC”的问题而挣扎，测试我在网上找到的各种解决方案，但似乎都不适合我。当使用CSS转换时，这个问题尤其明显，因为组件将在没有任何样式的情况下可见，然后转换为它们的CSS样式这仅在使用下一次构建然后使用下一次启动为生产构建时可见。在开发模式下，使用next，不存在FOUC问题最简单的例子： // next.config.js const withSass = require('@zeit/next-sass');

我将Next.js与Next sass一起使用。我一整天都在为一个非风格内容“FOUC”的问题而挣扎，测试我在网上找到的各种解决方案，但似乎都不适合我。当使用CSS转换时，这个问题尤其明显，因为组件将在没有任何样式的情况下可见，然后转换为它们的CSS样式

这仅在使用

下一次构建

然后使用

下一次启动

为生产构建时可见。在开发模式下，使用

next

，不存在FOUC问题

最简单的例子：

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

//pages/index.js
从“React”导入React；
导入“./scss/style.scss”；
常量Home=（）=>(
试验
);
导出默认主页；

GitHub回购：

问题视频：

我做错了什么？谢谢

所以。。。这个问题原来是一个浏览器错误，与Next或Webpack完全无关。管理使用普通CSS和HTML进行复制，在加载时触发转换。这个解决方案听起来很愚蠢，但解决了这个问题：在你的文件中导入一个空的.js文件。我认为它使两个资源“阻塞”，因此等待第一次渲染

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

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

...

…并将

chrome fix.js

作为空文件放在my/static中

更多信息：

我无法复制您的问题，将github回购please@evgenifotia谢谢你的检查。我刚才添加了一个GitHub回购和一个视频剪辑。

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

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

export default Home;

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