in production after bundle ,class name in css file not equal to it in html tags,very confusing .when styleName = 'className' appear this error but write className = {style.className} is disappear

[dxiuxiu]

my package.json like this

{
  "name": "code",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.config.js",
    "build": "webpack --config webpack.prd.config.js",
    "live": "live-server ./dist"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "autoprefixer": "^9.7.5",
    "babel-loader": "^8.1.0",
    "babel-plugin-react-css-modules": "^5.2.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "cssnano": "^4.1.10",
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.3",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.0.1",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "live-server": "^1.2.1",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss-less": "^3.1.4",
    "postcss-loader": "^3.0.0",
    "postcss-sass": "^0.4.2",
    "postcss-scss": "^2.0.0",
    "react-css-modules": "^4.7.11",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "url-loader": "^4.0.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "fetch": "^1.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2"
  }
}

my webpack config like this

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  mode: "production",
  entry: {
    index: "./src/index.jsx"
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js|x$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.js|x$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[path][name]__[local]--[hash:base64:5]',
              }
            }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                strictMath: true,
                noIeCompat: true,
              },
            },
          },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            // loader: 'style-loader', // dev
            loader: MiniCssExtractPlugin.loader, // production
          },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[path][name]__[local]--[hash:base64:5]',
              }
            }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader'
          },
        ],
      },
      {
        test: /\.(jpe?g|png|gif|webp)$/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10 * 1024,
            name: 'static/images/[hash:6].[ext]',
            fallback: 'file-loader',
            publicPath: '../'
          }
        }]
      },
      {
        test: /\.(wsv|ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
          loader: "file-loader",
          options: {
            name: 'static/media/[name].[hash:7].[ext]',
          }
        }]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ template: './public/template.html' }),
    // new MiniCssExtractPlugin(),
    new MiniCssExtractPlugin(
      {
        filename: 'style/[name].[contenthash].css',
        chunkFilename: 'style/[id].[contenthash].css',
        // path: path.resolve(__dirname, 'dist') // 默认值
      }
    )
  ],
  output: {
    filename: 'static/js/[name].[contenthash].js',
    // chunkFilename: 'static/js/[name].[contenthash].js',
    chunkFilename: 'static/js/[id].[contenthash].js',
    // path: path.resolve(__dirname, 'dist') // 默认值
  },
}

my .babelrc.js like this

const path = require('path')
const context = path.resolve(__dirname, 'src')
module.exports = {
  presets: [
    require('@babel/preset-env'),
    require('@babel/preset-react')
  ],
  plugins: [
    // [
    //   'react-css-modules',
    //   {
    //     context,
    //     generateScopedName: '[path][name]__[local]--[hash:base64:5]',
    //   }
    // ]
    [
      'react-css-modules',
      {
        context,
        generateScopedName: '[path][name]__[local]--[hash:base64:5]',
        filetypes: {
          '.scss': {
            syntax: 'postcss-scss'
          },
          '.less': {
            syntax: 'postcss-less'
          }
        },
        autoResolveMultipleImports: true
      }
    ]
  ]
}

i think i did have any config error ,but why like this? less or scss all my code in gitHub repositorie named react-senior branch dev-003-less