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

我通常会这样写:

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

Answer 2

解决方案

{
test: /.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]--[hash:base64:5]',
},
},
},
],
},