How to make HMR work for scss|sass if server express?

I for some tutorials from the network set up Hot Module Replacement for project server on 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 ServerIO as } 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

And everything sort of works if I change something in scripts, or in Vue/React project, rebuild and change data directly on the page, but when you change css/sass/scsss, the project is rebuild, but the page does not reload and the data is not updated. Have to restart to see the changes.
How to do that when you change styles, the page is also updated?
April 19th 20 at 12:36
0 answer

Find more questions by tags WebpackExpress.js