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

Question

我CSS-modules通过配置 webpack，但结果，类名看起来错误。

感觉 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的css-loader. 该属性负责生成类名。

我通常会选择：

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