为什么 Angular CLI 弹出的 Webpack 2 配置中有两个 SCSS 规则

Question

我已经用Angular CLI弹出了我们的webpack配置，我想知道为什么有两个处理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

一个用于全局样式表，一个用于组件样式表。第一条规则适用于组件样式，因为它排除了全局样式，第二条规则适用于全局样式，因为它包括全局样式。 include和exclude是相互排斥的。 include的意思是"只有这些"，而exclude的意思是"除了这些之外的所有">

这两种样式表类型的处理方式不同。通常，组件样式将内联编译，而全局样式将注入到 HTML <style>元素中