Как заставить работать HMR для scss|sass если сервер на express?

Question

[dark_king_13]

Я по каким-то туториалам из сети настроил Hot Module Replacement для проекта с сервером на express.

hmr.ts

import { Application } from 'express'
const webpack = require('webpack')
const webpackDevConfig = require('../../../webpack/webpack.dev.conf')

const bundler = webpack(webpackDevConfig)

const webpackDevMiddleware = require('webpack-dev-middleware')(bundler, {
  stats: 'errors-warnings',
  hot: true,
})
const webpackHotMiddleware = require('webpack-hot-middleware')(bundler)

function hmr(app : Application) {
  app.use(webpackDevMiddleware)
  app.use(webpackHotMiddleware)
}

module.exports = hmr

index.ts

import { Application, Request, Response } from 'express'
import { Server as ServerIO } from 'socket.io'
import { Server } from 'http'
const fs = require('fs')
const path = require('path')
const http = require('http')
const express = require('express')
const consola = require('consola')
const socketIO = require('socket.io')
const bodyParser = require('body-parser')
const socketAction = require('./modules/socket.io')
require('dotenv').config()

function start () {
  try {
    const PORT : number|undefined = parseInt(process.env.PORT || '3000')
    const HOST : string|undefined = process.env.HOST || 'localhost'
    
    const PATH_TO_CLIENT : string  = path.join(__dirname, '..', '..', './dist')
    const PATH_TO_HTML  : string = path.join(PATH_TO_CLIENT, 'index.html')

    fs.stat(PATH_TO_HTML, (err : any) => {
      if (err && process.env.NODE_ENV === 'production') throw consola.error({message: 'index.html is not defined', badge: true,})
    })

    const app : Application = express()
    const server : Server = http.createServer(app)
    const io : ServerIO = socketIO.listen(server)

    app.use(express.static(PATH_TO_CLIENT))
    app.use(bodyParser.json())
    app.use(bodyParser.urlencoded({ extended: true }))
    if (process.env.NODE_ENV === 'development') require('./modules/hmr')(app)

    app.get('/', (req : Request, res : Response) => res.sendFile(PATH_TO_HTML))

    server.listen(PORT, HOST, () => consola.ready({
        message: `Server is listening to http://${HOST}:${PORT}`, badge: true, }))

    socketAction(io)

  } catch(err) { if (err)  consola.error({ message: `ERROR: ${err}`, badge: true, }) }
}

start()

webpack.dev.conf.js

const webpack =  require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  stats: 'errors-warnings',
  entry: {
    app: [
      'webpack-hot-middleware/client?path=/__webpack_hmr&reload=true',
      `${baseWebpackConfig.externals.paths.src}/index.tsx`,
    ],
  },
  output: {
    filename: `${baseWebpackConfig.externals.paths.assets}js/[name].[hash].bundle.js`,
  },
  module: {
    rules: [
      {
        test: /\.(png|jp(e)?g|gif|svg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: `${baseWebpackConfig.externals.paths.assets}img`,
            useRelativePath: true
          }
        },
      }, 
    ]
  },
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: '[file].map'
    }),
    new MiniCssExtractPlugin({
      filename: `${baseWebpackConfig.externals.paths.assets}css/[name].[hash].css`,
      chunkFilename: `${baseWebpackConfig.externals.paths.assets}css/[name].[hash].chunk.css`,
    }),
    new webpack.HotModuleReplacementPlugin(),
  ]
})

module.exports = devWebpackConfig

И всё вроде как работает, если я меняю что-то в скриптах, или во Vue/React, проект пересобирается и данные сразу меняются на странице, но когда меняю css/sass/scsss, то проект пересобирается, но страница не перезагружается и данные не обновляются. Приходится самому перезагружать, чтоб увидеть изменения.
Как сделать, чтоб при изменении стилей, страница тоже обновлялась?