How to make Webpack HMR work with CSS entry and mini-css-extract-plugin or style-loader?

Question

I've got an old app that was migrated to Webpack. It uses CSS files as entry points, e.g.

 entry: {
  'page-1': 'app/javascript/packs/page-1.js',
  'page-2': 'app/javascript/packs/page-2.js',
  'global': 'app/javascript/packs/global.css',
  'reset': 'app/javascript/packs/reset.css',
  ...
}

and mini-css-extract-plugin to extract these into CSS files that are later loaded in HTML files. These files are then loaded via link tags on pages that do not have any JS code, but also on pages that do have JS code to extract common CSS code into their own files. This works fine in both development and production.

Now, I'm trying to enable HMR in development with webpack-dev-server. When I turn it on, I do not see any CSS code being loaded from these CSS entries :/ It doesn't seem to matter if I use mini-css-extract-plugin loader or style-loader, the code from these CSS entries is not present on the page.

Is there any way to make it work with HMR? Is it even supposed to work? I don't really care if I get fast reloading for these CSS files as they are rarely changed, I only need their code to be present when HMR is enabled. I'd like to avoid refactoring the whole app to import these CSS files from JS code, as it's easy to break something and I'd also need to add new JS entries for pages that don't have any JS code, only to import these CSS files there :/

I don't know if it matters, but this is a Ruby on Rails app with Webpacker/Shakapacker gem.