MiniCssExtractPlugin从应用程序全局样式webpack中提取css文件

Question

我正在使用Angular 6框架以及webpack 4模块捆绑器。我有2个webpack配置文件。

全局应用程序样式位于“内容/样式”路径中。每个角度组件样式都放在“scripts / app”路径中的相应组件文件夹中。例如'scripts / app / dashboard / dashboard.component.scss'

Webpack常用配置包含“scss”文件的以下规则。

webpack.common.js：

module: {
   rules: [
      ...
      {
                test: /\.scss$/,
                use: ["to-string-loader", "css-loader", "sass-loader"],
                exclude: [helpers.root("Content", "Styles")]
      },
      ....
   ]
}

Webpack开发配置包含全局“scss”文件的以下规则。

webpack.dev.js：

module: {
  rules: [
    ...
    {
                test: /\.scss$/,                    
                include: [helpers.root("Content", "Styles")],
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: {
                                safe: true
                            }
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            plugins: function () { // post css plugins, can be exported to postcss.config.js
                                return [
                                    require("precss"),
                                    require("autoprefixer")
                                ];
                            }
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {}
                    }
                ]
            },
         ....
  ]
}

我想将提取的全局css文件注入index.html。问题是当我有'include'选项时，不应用dev规则。如果缺少此选项，则该规则将应用于我的应用程序的所有scss文件，同时创建包含所有组件样式的“css”文件。有人能告诉我我做错了什么吗？