为什么 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 表示 "only these"，而 exclude 表示 "all but these"

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

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

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

webpack

angular-cli

webpack-2

angular