javascript - 通过 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]',
        },
    },
},