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

Question

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

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

当我启动应用程序时，我看到 HTML 中的 class 设置正确，但在 <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

Rant：我反对 create-react-app (CRA) 的众多原因之一是因为它在 自定义。如果您希望包含功能，我建议您创建自己的 webpack 配置。为什么？您将更加熟悉 Webpack、如何配置它、如何在其限制内工作以及如何 add/change/adjust 打包以满足您的需求。

也就是说，CRA 预配置了全局和本地（模块）CSS 导入，它与 babel-plugin-react-css-modules (BPRCM) 冲突。 CRA 预计 .css 没有 module.css 的文件是正常的全球进口。同时，BPRCM 预计 .css 文件是本地导入的。这不仅是冲突，而且 localIdentName 也不匹配。默认情况下，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]（[=97= 中的第 4 个选项]), 所以我将在下面的示例中使用它), 然后你需要将 BPRCM 添加到 babel-loader 下的 webpack.config.js 因为 CRA 不寻找 babel 配置, 然后您必须删除 CSS 模块导入规则，最后，您需要向其全局 CSS 规则添加一些选项以使其成为本地规则并利用 localIdentName.

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

利用上面的 repo:

在 ~/Desktop 上打开终端 window 并克隆存储库：git clone git@github.com:mattcarlotta/cra-css-modules.git
cd 进入 cra-css-modules 文件夹并输入 yarn install 或 npm install
键入 yarn start 或 npm start 到运行示例

我改变了什么:

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

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

babel-plugin-react-css-modules does not change class name in style tag

javascript

css

reactjs

create-react-app

babel-plugin-react-css-modules