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

从提供的 webpack 配置开始，重点检查 react-css-modules 的 HMR 设置和 SCSS loader 链。重现添加 styleName 类，然后在样式表中定义该类的过程，并跟踪样式表的更改是否传递到了模块更新。完成的标准是：仅编辑 CSS 就能更新正在运行的页面，而无需重新保存 JavaScript 文件。

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:

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: ''
    }
  }
}