如何使用 React 设置 babel-plugin-react-css-modules？

问题描述

我现在正在学习 React，我遇到了“React CSS Modules”的概念。我喜欢 CSS 范围的想法，我想在我的代码中使用它。我发现 babel-plugin-react-css-modules 这个插件可以让代码看起来更干净。但是，我在代码中设置它时遇到了一些问题。

这是我的 .babelrc 文件

{
    "presets": ["@babel/preset-env","@babel/preset-react"],"plugins": [
        [
            "babel-plugin-react-css-modules",{
                "webpackHotModuleReloading": true,"autoResolveMultipleImports": true
            }
        ]
    ]
}

我的webpack.config.js：

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.js",output: {
        path: path.join(__dirname,"/dist"),filename: "index_bundle.js",},module: {
        rules: [
            {
                test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {
                    loader: "babel-loader",options: {
                        presets: ["@babel/preset-env"],cacheDirectory: true,{
                test: /\.css$/i,use: [
                    "style-loader",{
                        loader: "css-loader",//generating unique classname
                        options: {
                            importLoaders: 1,// if specifying more loaders
                            modules: true,sourceMap: false,localIdentName:
                                "[path]___[name]__[local]___[hash:base64:5]",//babel-plugin-css-module format
                            //localIdentName: "[path][name]__[local]" //recommended settings by cssloader#local-scope,this option generate unique classname for compiled css
                        },],plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",}),};

还有我的package.json：

{
  "name": "react-webpack","version": "1.0.0","description": "","private": true,"scripts": {
    "start": "npx webpack server --mode development --open --hot","build": "webpack --mode production"
  },"author": "","license": "ISC","dependencies": {
    "babel-plugin-react-css-modules": "^5.2.6","react": "^17.0.2","react-dom": "^17.0.2"
  },"devDependencies": {
    "@babel/core": "^7.14.0","@babel/preset-env": "^7.14.1","@babel/preset-react": "^7.13.13","babel-loader": "^8.2.2","css-loader": "^5.2.4","html-webpack-plugin": "^5.3.1","postcss-scss": "^3.0.5","style-loader": "^2.0.0","webpack": "^5.36.2","webpack-cli": "^4.7.0","webpack-dev-server": "^3.11.2"
  }
}

如果我执行 npm start，我会收到错误：

modules by path ./src/css/*.css 1.42 KiB
    ./src/css/styles.css 1.38 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/css/styles.css 39 bytes [built] [code generated] [1 error]

./src/index.js 194 bytes [built] [code generated]
  ./src/components/App.js 388 bytes [built] [code generated]

ERROR in ./src/css/styles.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/css/styles.css)
Module build Failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unkNown property 'localIdentName'. These properties are valid:
   object { url?,import?,modules?,sourceMap?,importLoaders?,esModule? }

有关详细信息，我有我的代码 here。感谢您的帮助！

BTY，我阅读了可能的解决方案 here，但没有运气。

解决方法

babel-plugin-react-css-modules 严重过时且未维护； 但是我维护了它的最新分支 @dr.pogodin/babel-plugin-react-css-modules :)