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表示＆＃34;只有这些＆＃34;，而exclude表示＆＃34;除了这些＆＃34;

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

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

1 个答案: