title: Stop extract-css-chunks-webpack-plugin from combining all CSS
body: <p>I am using Webpack 4 to build a simple website with an express backend. Now that I am implementing a custom element I am confronted with an issue regarding the shadow DOM. </p>
  
  <p>The issue is as follows: all of my SCSS is being combined into one CSS output file. I need it to remain separate so that the custom element's style can be dynamically added to the shadow DOM, when the element is connected. </p>
  
  <p>I am using <code>extract-css-chunks-webpack-plugin</code> (which I think the issue is with), <code>css-loader</code>, <code>postcss-preset-env</code> and <code>sass-loader</code> to handle all SCSS within the app/site. </p>
  
  <p>All my searching thus far has simply lead me to the exact opposite of what I need (people trying to combine their SCSS).</p>
  
  <p>I understand I could build the custom element separately and then just import it into the project after it has been built but that means managing two building environments and then having to version control across both -- seems like a lot of overhead.</p>
  
  <p>The project's folder structure is as follows:</p>
  
  <pre><code>root
  --src/
  ----assets/
  ------js/
  --------main.js
  ------scss/
  --------main.scss
  ------web-components/
  --------contact-modal.js
  --------scss/
  ----------modal.scss
  </code></pre>
  
  <p>My current webpack dev config is as follows:</p>
  
  <pre><code>    **omitted**
  
      module: {
          rules: [{
                  test: /\.(scss)$/,
                  use: [{
                          loader: ExtractCssChunksPlugin.loader,
                          options: {
                              hot: true,
                          }
                      },
                      {
                          loader: 'css-loader',
                          options: {
                              sourceMap: true,
                          }
                      },
                      {
                          loader: 'postcss-loader',
                          options: {
                              indent: 'postcss',
                              plugins: () =&gt; postcssEnv(),
                              sourceMap: 'inline',
                          },
  
                      },
                      {
                          loader: 'sass-loader',
                          options: {
                              sourceMap: true
                          }
                      }
                  ]
              },
  
      **omitted**
  
      plugins: [
          new webpack.HotModuleReplacementPlugin(),
          new HtmlWebpackPlugin({
              template: 'src/views/pages/index.ejs',
              filename: 'index.html',
          }),
          new ExtractCssChunksPlugin({
              filename: 'assets/css/[name].css',
              chunkFilename: 'assets/css/[id].css',
          })
      ]
  </code></pre>
  
  <p>If there is a better way of using custom elements which I have overlooked I'd appreciate any feedback. </p>
  
  <p>Thank you in advance.</p>
  
  <p>EDIT:</p>
  
  <p>Figure it would be beneficial to state that I am including the modal.scss file with an import in the contact-modal.js file.</p>