Class names via CSS modules are generated in a strange way

I configured CSS-modules via webpack, but as a result, the class names look wrong.

It feels like webpack is not responding to them. Although it should look something like this: class="Input-input_ytoew" but you can see the result yourself.

webpack
----------
module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 1,
              modules: true,
            },
          },
        ],
        include: /.module.scss$/,
      },
      {
        test: /.s?css$/,
        use: ["style-loader", "css-loader"],
        exclude: /.module.scss$/,
      },
    ],
  },
};


Input.stx
----------
import React from "react";

import s from "./Input.module.scss";

export const Input = ({ value }: any) => {
  return (
    <>
      <input className={s.input} type="text" value={value} />
    </>
  );
};

Answer

See localIdentName of css-loader. The property is responsible for generating the class names.

I’d usually go with:

{
    loader: 'css-loader',
    options: {
        modules: {
            localIdentName:'[name]__[local]--[hash:base64:5]',
        },
    },
},