gluestick-plugin-no-fouc
v4.6.6
Published
Remove FOUC by extracting css into file and linking them to renderer page in development
Downloads
42
Readme
gluestick-plugin-no-fouc
Removes Flash of Unstyled Content (FOUC) in development.
How it works
All styles will be extracted to a css file using ExtractTextWebpackPlugin
then, the file will be linked by server/renderer and added to <head>
element. It sits side-by-side with style-loader
, so you can still use HMR.
In production this plugin does nothing.
How to use
- Install plugin
npm install --save gluestick-plugin-no-fouc
- Define (and configure) plugin in
src/gluestick.plugins.js
:
export default [
'gluestick-plugin-no-fouc'
]
// or
export default [
{
plugin: 'gluestick-plugin-no-fouc',
options: {
filename: '[name].fouc-reducer.css'
},
},
]
Configuration
filename
:string
(default:[name]-[contenthash].init-no-fouc.css
) - name of the file to which all styles will be extracted, can contain webpack tokens eg:[name]
,[hash]
,[contenthash]
and so on