Question

0

213

Views

react-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?

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-11T07:06:33.224Z

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;

Answer 2 · 2022-07-11T07:06:33.231Z

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$/,
      },

0

213

react-css-modules is not working correctly

2 answers

0

0

Find remote jobs

Andres GPT