Why is the loader style used as a backup with the Webpack ExtractSass plugin?

Question

The following example (found here ) is style-loaderused as a reserve in design mode. Why?

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
        }]
    },
    plugins: [
        extractSass
    ]
};

Answer 1

Retrieving CSS from JavaScript is mainly used to not rely on a fully loaded JavaScript (package) until it injects CSS into the head as a tag <style>that can trigger Flash Free Content (FOUC) . And, of course, it also just separates CSS from JavaScript, because it is usually preferable and allows you to cache separately.

, FOUC - , , , JavaScript, , , . . , CSS . , , , CSS . - , , . . - .

, , , , CSS <style> JavaScript, , style-loader . , .