How Can I Inline Importantant CSS while component based CSS loads as file using Webpack 4?

Question

I have a project using Webpack 4 extremely close to the preact-boilerplate repo like so: https://github.com/developit/preact-boilerplate/blob/master/webpack.config.babel.js#L50

Just like how that project is setup, it's using ExtractTextPlugin and stuff "all" the output CSS into a style.css file. Which is fine and dandy, but in some small edge cases. It seems like the CSS doesn't load fast enough were you notice a awkward white page for a fraction of a second, plus it makes more sense from a performance prospective to style inline important CSS in the header. Such as normalize.css, and some body attributes.

TL;DR: Is there a way to isolate my src/style/ or normalize.css with my src/components/ css into different output types? e.g: src/style/ will be inline HTML in head, while src/components/ will load in style.css using HtmlWebpackPlugin?

module : {
    rules: [
        {
            test:  /\.(scss|css)$/,
            include: [path.join(SRC_PATH, 'components')],
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: { modules: true, sourceMap: isDevelopment, importLoaders: 1, minimize: true }
                    },
                    {
                        loader: `postcss-loader`,
                        options: {
                            sourceMap: isDevelopment,
                            plugins: () => {
                                autoprefixer({ browsers: [ 'last 4 versions' ] });
                            }
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: isDevelopment }
                    }
                ]
            })
        },
        {
            test:  /\.(scss|css)$/,
            exclude: [path.join(SRC_PATH, 'components')],
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: { modules: true, sourceMap: isDevelopment, importLoaders: 1, minimize: true }
                    },
                    {
                        loader: `postcss-loader`,
                        options: {
                            sourceMap: isDevelopment,
                            plugins: () => {
                                autoprefixer({ browsers: [ 'last 4 versions' ] });
                            }
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: isDevelopment }
                    }
                ]
            })
        },
}

Posted some code for clarification.

Edit: I've found https://github.com/numical/style-ext-html-webpack-plugin However it doesn't seem to support Webpack 4 at the moment.