加载样式使用Webpack会导致样式在初始加载时闪烁

Question

我正在研究一个项目,我试图通过webpack加载我的scss/sass.我目前正在使用以下库成功加载它:

我能够成功地require/ import样式,但问题是,当我加载应用程序时,页面加载没有样式约1.5秒,然后页面"闪烁",样式最终加载.

有没有办法通过webpack解决这个问题？我听说过ExtractTextPlugin和其他一些人但是我试图通过查看文章示例和github示例来实现它,但它们似乎无法通过使用require/ import在需要的地方工作.我只想根据我的反应组件需求来定义样式.不加载组件不需要的任何样式.

Answer 1

您（至少）有两个选项来防止这种 FOUC（无样式内容的 Flash）：

使用mini-css-extract-plugin或extract-text-webpack-plugin 等插件将编译后的 CSS 提取到一个单独的文件中，您可以在您的<head>（阅读更多）或
使用 CSS 隐藏您的内容，直到样式准备好为止，加载的样式应包含使内容可见的样式。