react-css-modules 无法正常工作

Posted 2023-02-21

【中文标题】react-css-modules 无法正常工作

【英文标题】：react-css-modules is not working correctly

【发布时间】：2021-12-07 06:01:26

【问题描述】：

我想使用 react-css-modules，但是当我在代码中使用 className styles.myBtn 时，我在浏览器中得到了这个类 N6OJGonmM2EqyZqImevh 而不是 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代码

.myBtn
  color: blue;

组件.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;

如何获取Component_myBtn_XxXx类型类？

【参考方案1】：

如果你的组件文件名为Component，其代码如下：

const Component=()=>
  return(
   ...
  )

假设您在Component 旁边有一个css 文件，它的内容是：

.myBtn
  color: blue;

因此，css 文件应命名为：Component.module.css。最后，你可以这样使用它：

import React from "react";
import styles from "./Component.module.css";

const Component=()=>
  return(
    <div>
      <button className=styles.myBtn>1234</button>
    </div>
  )


export default Component;

【讨论】：

我做同样的事情，但我仍然得到一个字符集而不是一个类。它有效，但看起来很糟糕。我也使用 webpack 来构建项目。也许其中有错误？负责加载样式的部分：``` test:/\.(css|less)$/, use:[MiniCssExtractPlugin.loader, "css-loader"] , ``

@Mr.Kurosava 请查看已附上的codesandbox。

@Mr.Kurosava 您的问题解决了吗？

【参考方案2】：

我必须在 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$/,
      ,

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。