babel-plugin-react-css-modules不会更改样式标签中的类名称

兰特（Rant）：我反对create-react-app（CRA）的众多原因之一是因为定制方面的灵活性可能不够灵活。如果您希望包含功能，建议您创建自己的webpack配置。为什么？您将更加熟悉Webpack，如何配置它，如何在其限制范围内工作以及如何根据需要添加/更改/调整程序包。

也就是说，CRA预先配置了全局和本地（模块）CSS导入，并且与babel-plugin-react-css-modules（BPRCM）冲突。CRA希望.css文件不是module.css正常的全局导入。同时，BPRCM希望.css文件是本地导入。不仅冲突，而且localIdentNames不匹配。默认情况下，CRA会在App.module.css哪里module.css指定它是调制导入，如：import { App } from "./App.module.css";。作为这样它分配localIdentNames如[file/folder]_[local]_[hash]所提到这里，这里和喷出内config/webpack.config.js（线432-456 -它利用了react-dev-utils/getCSSModuleLocalIdent包）。

为了解决这些冲突，您需要建立一个localIdentName（默认情况下，BPCRM使用以下方法generateScopedName：[path] ___ [name] __ [local] ___ [hash：base64：5]（表中的第4个选项），所以我'将在下面的示例中使用它），然后您需要在其webpack.config.js下方添加BPRCM，babel-loader因为CRA不会查找babel配置，然后您必须删除CSS模块导入规则，最后，您需要向其全局CSS规则添加一些选项，以使其成为本地规则并利用localIdentName。

这是一个工作示例：https : //github.com/mattcarlotta/cra-css-modules

要利用上面的仓库：

• 在上打开一个终端窗口~/Desktop并克隆仓库：git clone [email protected]:mattcarlotta/cra-css-modules.git
• cd进入cra-css-modules文件夹并输入yarn install或npm install
• 键入yarn start或npm start运行示例

我改变了什么：

• 声明一个localIdentName来匹配BPRCM的默认作用域类名称（您可以将该名称更改为所需的名称，并且仍可以与上面的示例存储库一起使用）。
• 将BPRCM添加到babel-loader规则中。
• 添加了模块配置以将全局CSS规则切换为本地CSS规则
• 删除了本地模块CSS规则。
• 改变了这一切classNames，以styleName在App.js文件。