他的好處不說了

網上一堆文章一個能打的都沒有，

添加開發依賴

pnpm add -D @dr.pogodin/babel-plugin-react-css-modules @types/react-css-modules  

Babel Plugin "React CSS Modules" | Dr. Pogodin Studio

看@dr.pogodin/babel-plugin-react-css-modules官方文檔

不使用babel-plugin-react-css-modules

手搭webpack配置需要處理

1.能啟用css modules

對于裸 Webpack，請參見webpack css-loader的 modules 的選項 鏈接。

2.配置@dr.pogodin/babel-plugin-react-css-modules

使用

• 將此插件作為直接依賴項安裝（在不允許編譯時 styleName 解析的邊緣情況下，插件會回退到運行時解析）。

npm install --save @dr.pogodin/babel-plugin-react-css-modules

• Install Webpack at least as a dev dependency:
  至少將 Webpack 作為開發依賴項安裝 Webpack：

npm install --save-dev webpack

• Add the plugin to Babel configuration:
  將插件添加到 Babel 配置中：

{"plugins": [["@dr.pogodin/react-css-modules", {// The default localIdentName in "css-loader" is "[hash:base64]",// it is highly-recommended to explicitly specify the same value// both here, and in "css-loader" options, including the hash length// (the last digit in the template below)."generateScopedName": "[hash:base64:6]"// See below for all valid options.}]]
}

我自己項目手寫的webpack.base.js中使用

const CSS_MODULE_LOCAL_IDENT_NAME = '[name]__[local]___[hash:base64:5]';{test: /.(jsx?)|(tsx?)$/,exclude: /node_modules/,use: [{loader: 'babel-loader',options: {presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],plugins: [['@dr.pogodin/react-css-modules',{generateScopedName: CSS_MODULE_LOCAL_IDENT_NAME,autoResolveMultipleImports: true, // 允許多個匿名導入webpackHotModuleReloading: true, // 啟用熱模塊重新加載代碼的注入handleMissingStyleName: 'throw', // 確定應為未定義的 CSS 模塊執行的操作filetypes: {'.less': {syntax: 'postcss-less',},},},],],},},],
},
{test: /\.less$/,use: ['style-loader',{loader: 'css-loader',options: {modules: {localIdentName: CSS_MODULE_LOCAL_IDENT_NAME,auto: resourcePath => resourcePath.endsWith('.module.less'),},},},{loader: 'postcss-loader',options: {postcssOptions: {plugins: [['postcss-preset-env', {}]],},},},{loader: 'less-loader',options: {lessOptions: {javascriptEnabled: true,},},},],// 排除 node_modules 目錄exclude: /node_modules/,
},

3.TS項目不能直接在jsx中使用styleName，會報錯,

需要引入@types/react-css-modules

就可以使用module.less和styleName了

項目中使用

index.module.less

.adminColor {color: aquamarine;background-color: black;
}

index.tsx

import React from 'react';
import './index.module.less';const Dashboard: React.FC = () => {return (<><h2 styleName="adminColor">我的</h2><div styleName="adminColor">我的</div></>);
};
export default Dashboard;

效果

樣式編碼