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

Posted 2023-02-21

【中文标题】如何使用 React 设置 babel-plugin-react-css-modules？

【英文标题】：How to set up babel-plugin-react-css-modules with React?

【发布时间】：2021-07-31 08:14:06

【问题描述】：

我现在正在学习 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，但没有运气。

【问题讨论】：

尝试将css-loader的版本降低到v3以下。

【参考方案1】：

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

【讨论】：

太酷了！谢谢，我试试这个。