Styles bundle is not included when using Webpack 5

Current Behavior

The styles bundle is not included in the dist/.../index.html when using Webpack 5. This happens if there is more than one file in build.styles config of workspace.json.

Expected Behavior

All of the files listed in build.styles are bundled into a single styles.[hash].css and included in the dist/.../index.html file. It worked like this in webpack 4.

Steps to Reproduce

I have created a project to reproduce the problem: https://github.com/markogresak/nx-styles-bug#reproducing-the-problem-with-missing-styles-bundle

It’s a project where I’ve added only some randomly generated css to the output.

Failure Logs

grep css dist/apps/nx-styles-bug/index.html
# <link rel="stylesheet" href="main.79da9420fe0c20301be7.css"></head>

It’s missing the 591.f4af1e18666da591d76a.css, which includes the stylesheets listed in workspace.json under build.styles. Also, the missing file should be named styles.[hash].css.

Environment

nx report

>  NX  Report complete - copy this into the issue template

  Node : 16.4.0
  OS   : darwin x64
  npm  : 7.19.0

  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 12.8.0
  @nrwl/cypress : 12.8.0
  @nrwl/devkit : 12.8.0
  @nrwl/eslint-plugin-nx : 12.8.0
  @nrwl/express : Not Found
  @nrwl/jest : 12.8.0
  @nrwl/linter : 12.8.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/nx-cloud : Not Found
  @nrwl/react : 12.8.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.8.0
  @nrwl/web : 12.8.0
  @nrwl/workspace : 12.8.0
  @nrwl/storybook : 12.8.0
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

[markogresak]

Great, sorry for the inconvenience. We’ll get both the split chunks and minification fixed soon.

No worries, no inconvenience caused, the workaround was simple. I’ve accepted the fact that webpack 5 support is still new and can have issues. I’m happy to test it out and provide feedback. Thank you for working on Nx and making it available for free, it saves us a lot of time.

[jaysoo]

I have a fix ready for this. Going to see if we can cut a patch release for 12.8.0. We’re also releasing 12.9.0 next week.

In the meantime the only workaround is going back to webpack 4, or you can customize the webpack to remove the optimization.splitChunks.styles entry.