CODEWITHSUNDEEP
sasswebpack
kennet postigo
kennet postigo

Reputation: 525

Loading Styles With Webpack causes styles to blink on initial load

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:

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.

Upvotes: 7

Views: 2002

Answers (1)

tsi
tsi

Reputation: 1264

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.

Upvotes: 2

Related Questions