Adding class to `styleName` and then adding class to CSS file does not work with HMR

I have this all setup and working and HMR will work except for in one use case. If you first add a class to `styleName` and then add the class to your css file HMR will not work. You need to go back to the JS file and re-save that file. This is the case no matter what `handleMissingStyleName` is set to. I have tried changing a number of settings in my Webpack config, but no luck. Any ideas are greatly appreciated. This is my Webpack config if that helps:

```js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const WriteFilePlugin = require('write-file-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = (env, argv) => {
return {
context: path.resolve(__dirname, 'src'),
entry: './index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'module.min.js'
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false
}),
new OptimizeCSSAssetsPlugin({})
]
},
resolve: {
alias: {
react: 'preact-compat',
'react-dom': 'preact-compat',
'create-react-class': 'preact-compat/lib/create-react-class',
'react-dom-factories': 'preact-compat/lib/react-dom-factories'
}
},
module: {
rules: [
{
test: /\.scss$/,
use: [
argv.mode !== 'production'
? 'style-loader'
: MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: argv.mode === 'production' ? false : true,
importLoader: 2,
modules: true,
localIdentName:
argv.mode !== 'production'
? '[local]-[hash:base64]'
: '[hash:base64]'
}
},
{
loader: 'resolve-url-loader'
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: [
require('autoprefixer')({
browsers: ['last 4 versions']
})
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
data: '@import "variables"; @import "mixins";',
includePaths: [path.resolve(__dirname, './src/style')]
}
}
]
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-class-properties',
['transform-react-jsx', { pragma: 'h' }],
[
'react-css-modules',
{
context: path.resolve(__dirname, 'src'),
webpackHotModuleReloading: true,
handleMissingStyleName: 'ignore',
generateScopedName:
argv.mode !== 'production'
? '[local]-[hash:base64]'
: '[hash:base64]',
filetypes: {
'.scss': {
syntax: 'postcss-scss'
}
}
}
]
]
}
}
},
{
test: /\.json$/,
use: 'json-loader'
},
{
test: /\.(xml|html|txt|md)$/,
use: 'raw-loader'
},
{
test: /\.(woff2?|ttf|eot|jpe?g|png|gif)(\?.*)?$/i,
use:
argv.mode === 'production'
? 'file-loader?name=[name].[ext]'
: 'url-loader'
},
{
test: /\.svg$/,
oneOf: [
{
include: [/css|non-inline-svg/],
use:
argv.mode === 'production'
? 'file-loader?name=[name].[ext]'
: 'url-loader'
},
{
exclude: [/css|non-inline-svg/],
loader: 'svg-inline-loader'
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(['build/**']),
new HtmlWebpackPlugin({
template: './index.html',
minify: { collapseWhitespace: true }
}),
new HtmlWebpackPlugin({
template: './module.html',
filename: 'module.html',
inject: false,
minify: { collapseWhitespace: true }
}),
new WriteFilePlugin(),
new MiniCssExtractPlugin({
filename: 'module.min.css'
}),
new CopyWebpackPlugin([
{ from: './manifest.json', to: './' },
{ from: './favicon.ico', to: './' }
])
],
devServer: {
port: process.env.PORT || 8080,
host: 'localhost',
publicPath: '/',
contentBase: './src',
historyApiFallback: true,
open: true,
openPage: ''
}
}
}
```