CODEWITHSUNDEEP
csswebpackwebpack-style-loader
user391986
user391986

Reputation: 30956

Webpack behavior with css page loads without style then flashes

Because I'm using Webpack to also bundle my css and that my script tag is at the bottom of my HTML, on initial page load I get the content of the page without any of the styling.

Then all of a sudden the styling comes in when the script kicks in.

Webpack is very useful to help bundle the CSS but this behavior is quite unsettling and not really acceptable.

What are common ways to remedy this problem?

Upvotes: 7

Views: 1675

Answers (2)

kjpc-tech
kjpc-tech

Reputation: 570

For webpack v4, mini-css-extract-plugin should be used instead of extract-text-webpack-plugin (source). There are usage examples on their README.

Upvotes: 1

matpie
matpie

Reputation: 17522

You can try using extract-text-webpack-plugin to break out the css in to their own files. That way you can add <link> tags yourself to those pages you wish to have their styles loaded before the JS is loaded. See stylesheets as separate bundle.

Upvotes: 3

Related Questions