0
214
Vistasreact-css-modules is not working correctly
I want to use react-css-modules, but when I use className styles.myBtn in code I get this class N6OJGonmM2EqyZqImevh in browser instead of myBtn_.
package.json
{
"name": "curairs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.4.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.4.0",
"less-loader": "^10.2.0",
"mini-css-extract-plugin": "^2.4.2",
"react": "^17.0.2",
"react-css-modules": "^4.7.11", // !!!
"react-dom": "^17.0.2",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"redux-thunk": "^2.3.0",
"style-loader": "^3.3.0",
"webpack": "^5.58.2",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.3.1"
}
}
css code
.myBtn{
color: blue;
}
Component.jsx
import React from "react";
import styles from "./myBtn.module.css";
const Component=()=>{
return(
<div>
<button className={styles.myBtn}>1234</button>
</div>
)
}
export default Component;
How to get Component_myBtn_XxXx type class?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
If your component file name is Component and its code is like this:
const Component=()=>{
return(
...
)
}
Assume that you have a css file next to the Component that its content is:
.myBtn{
color: blue;
}
So, the css file should named: Component.module.css. Finally, you can use it like this:
import React from "react";
import styles from "./Component.module.css";
const Component=()=>{
return(
<div>
<button className={styles.myBtn}>1234</button>
</div>
)
}
export default Component;
·
Juan Pablo Isaza
Denunciar
0
I had to add this in webpack.cofig
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1,
modules:{
localIdentName: '[name]__[local]___[hash:base64:5]'
},
},
},
],
include: /\.module\.css$/,
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,"css-loader"],
exclude: /\.module\.css$/,
},
·
Juan Pablo Isaza
Denunciar
Responde la pregunta