I configured CSS-modules via webpack, but as a result, the class names look wrong.
It feels like webpack is not responding to them. Although it should look something like this:
class="Input-input_ytoew" but you can see the result yourself.
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} />
</>
);
};
See localIdentName of css-loader. The property is responsible for generating the class names.
I'd usually go with:
{
loader: 'css-loader',
options: {
modules: {
localIdentName:'[name]__[local]--[hash:base64:5]',
},
},
},
Solution
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]--[hash:base64:5]',
},
},
},
],
},