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

Question

我想使用babel-plugin-react-css-modules 来创建唯一的类名，所以我做了一个PoC：我弹出了create-ract-app，然后我将babel-plugin-react-css-modules 添加到package.json 中的插件中：

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      "babel-plugin-react-css-modules"
    ]
  },

当我启动应用程序时，我看到 HTML 中的类设置正确，但在 <style> 标记内它是常规的 .App 名称：

我错过了什么吗？我认为它应该很容易设置，而且我犯了一些我看不到的愚蠢错误。提前感谢您的每一个回答。

编辑：App.js 代码：

import React from 'react';
import './App.css';

function App() {
  return (
    <div styleName="App">
      Test app
    </div>
  );
}

export default App;

Answer 1

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

也就是说，CRA 预配置了全局和本地（模块）CSS 导入，它与 babel-plugin-react-css-modules (BPRCM) 冲突。 CRA 预计没有 module.css 的 .css 文件是正常的全局导入。同时，BPRCM 期望.css 文件是本地导入的。这不仅是冲突，而且localIdentNames 不匹配。默认情况下，CRA 会查找App.module.css，其中module.css 指定它是调制导入，如下所示：import { App } from "./App.module.css";。因此，它将 localIdentNames 分配为 [file/folder]_[local]_[hash]，如提到的 here、here 和弹出的 config/webpack.config.js（第 432-456 行 - 它使用 react-dev-utils/getCSSModuleLocalIdent 包）。

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

---

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

利用上面的 repo：

• 在~/Desktop 上打开一个终端窗口并克隆repo：git clone git@github.com:mattcarlotta/cra-css-modules.git
• cd 进入cra-css-modules 文件夹并输入yarn install 或npm install
• 输入yarn start 或npm start 运行示例

我改变了什么：

• 声明了一个 localIdentName 以匹配 BPRCM 的默认作用域类名称（您可以将此名称更改为您喜欢的任何名称，它仍然可以与上面的示例存储库一起使用）。
• 在babel-loader 规则中添加了BPRCM。
• 添加了modules 配置以将全局 CSS 规则切换为本地 CSS 规则
• 删除了local modules CSS rule。
• 将App.js 文件中的所有classNames 更改为styleName。