Why are there two SCSS rules in Webpack 2 config ejected by Angular CLI

Question

I have ejected our webpack configuration with Angular CLI, and I am wondering why there are two rules for processing SCSS.

{
    exclude: [
        path.join(process.cwd(), "src/styles/styles.scss"),
        path.join(process.cwd(), "src/styles/vendor.scss")
    ],
    test: /\.scss$/,
    loaders: [
        "exports-loader?module.exports.toString()",
        "css-loader",
        "postcss-loader",
        "sass-loader"
    ]
},
{
    include: [
        path.join(process.cwd(), "src/styles/styles.scss"),
        path.join(process.cwd(), "src/styles/vendor.scss")
    ],
    test: /\.scss$/,
    loaders: ExtractTextPlugin.extract({
        use: [
            "css-loader",
            "postcss-loader",
            "sass-loader"
        ],
        fallback: "style-loader",
        publicPath: ""
    })
}

Answer 1

One is for global stylesheets and one is for component stylesheets. The first rule is for component styles, because it's excluding the global styles, and the second one is for global styles, as it's including the global styles. include and exclude are mutually exclusive. include means "only these", while exclude means "all but these"

Both these stylesheet types are handled differently. Generally the component styles will be compiled inline, while the global styles will be injected into the HTML <style> element