通过 CSS 模块生成的类名以一种奇怪的方式生成

Question

我通过 webpack配置了CSS-modules，结果类名看起来不对。

感觉 webpack 没有响应它们。虽然它应该看起来像这样： class="Input-input_ytoew" 但您可以自己查看结果。

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 1

见localIdentName of css-loader。该属性负责生成类名。

我通常会选择：

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