Loading Styles With Webpack causes styles to blink on initial load

user_3915146 0
Viewed 1668

I'm currently working on a project and Im attempting to load my scss/sass through webpack. I'm currently loading it in successfully using the following libs:

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

I am able to require/import the styles in successfully but the problem occurs that when I load up the application the page loads without the styles for about 1.5 seconds and then after the page "blinks" and the styles finally load in.

Is there a way to get around this through webpack? I have heard of ExtractTextPlugin and a few others but I've tried to implement it by looking at article examples and github examples but they don't seem to work by using require/import where they are needed. I'd like to only require the styles based on my react component needs. Not loading any styles that the components don't need.

webpack sass
1 Answers

You have (at least) two options to prevent this FOUC (Flash of unstyled content):

  1. Use a plugin like mini-css-extract-plugin or extract-text-webpack-plugin to extract the compiled CSS into a separate file that you can load normally in your <head> (read more) or
  2. Hide your content, using CSS, until styles are ready, the loaded styles should contain the styles that will make the content visible.
user_16600550
Related