Configuré CSS-modules través de webpack , pero como resultado, los nombres de las clases se ven mal.
Parece que el paquete web no les responde. Aunque debería verse así: class="Input-input_ytoew" pero puedes ver el resultado tú mismo.
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} /> </> ); };VerlocalIdentName de css-loader . La propiedad es responsable de generar los nombres de clase.
Normalmente iría con:
{ loader: 'css-loader', options: { modules: { localIdentName:'[name]__[local]--[hash:base64:5]', }, }, },Solución
{ test: /\.css$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { modules: { localIdentName: '[local]--[hash:base64:5]', }, }, }, ], },