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

时间:2016-03-11 16:45:56

标签: sass webpack

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

  • node-sass
  • sass-loader
  • css loader
  • style-loader

我能够成功地require / import样式,但问题是当我加载应用程序时,页面加载时没有样式约1.5秒然后页面“闪烁“而且风格终于加载了。

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

1 个答案:

答案 0 :(得分:1)

你有(至少)两个选项来阻止这个FOUC(无格式内容的Flash):

  1. 使用mini-css-extract-pluginextract-text-webpack-plugin这样的插件将已编译的CSS解压缩到一个单独的文件中,您可以在<head>read more)或
  2. 使用CSS隐藏您的内容,直到样式准备就绪,加载的样式应包含使内容可见的样式。