webpack-dev-server: Webpack 5 HMR not working for CSS updates

• Operating System: Linux 5.4.0-66-generic #74~18.04.2-Ubuntu

• Node Version: v12.21.0

• NPM Version: 7.5.6

• webpack Version: 5.24.3

• webpack-dev-server Version: 3.11.2 and 4.0.0-beta.0

• Browser: FF 86.0, Brave Version 1.21.73, Chromium Version 87.0.4280.141

• This is a bug

• This is a modification request

https://github.com/herokunt/hmr-repo-test

Expected Behavior

Updates are applied automatically without page refresh

Actual Behavior

Updates are applied after page refresh

For Bugs; How can we reproduce the behavior?

1. Start the server

npm i && npm start

1. Make whatever changes to SCSS files. Nothing changes until refresh.

body {
  /* color: #333; */
  color: red 
}

1. Check browser console and network requests on each update.

2. Make whatever changes to JS files. It works.

const title = document.querySelector('.project__title');
title.style.color = 'green';