Menu
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?
784
In the following code block, css-loader and style-loader are used together. Similar to babel-loader , we can load CSS files to style our pages like so: module: { rules: [ { test: /\\. js$/, loader: "babel-loader", exclude: "/node_modules/", }, // CSS rules { test: /\\.
Loaders are the node-based utilities built for webpack to help webpack to compile and/or transform a given type of resource that can be bundled as a javascript module. css-loader is the npm module that would help webpack to collect CSS from all the css files referenced in your application and put it into a string.
style-loader injects the styling through a style element. The way it does this can be customized. It also implements the Hot Module Replacement interface providing for a pleasant development experience. The matched files can be processed through asset modules by using the type field at a loader definition.
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.
59
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
