babel-plugin- tag css-模块不会更改样式标记中的类名。

Question

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

"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

customization. Rant：我反对create-react-app的众多原因之一是，当涉及到create-react-app时，它是多么的不灵活。如果您希望包含功能，我建议您创建自己的webpack配置。为什么？您将更加熟悉Webpack，如何配置它，如何在其范围内工作，以及如何根据您的需要添加/更改/调整包。

也就是说，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]，如所提到的这里、这里和在弹出的config/webpack.config.js中(第432-456行--它使用了react-dev-utils/getCSSModuleLocalIdent包)。

为了解决这些冲突，您需要建立一个localIdentName (默认情况下，BPCRM使用此generateScopedName：[散列:基数64:5] (表中的第四个选项)，因此我将在下面的示例中使用它)，然后您需要将BPRCM添加到babel-loader下的webpack.config.js中，因为CRA不查找babel配置，然后您将不得不删除CSS模块导入规则，最后，您需要向他们的全局CSS规则添加一些选项，使其成为本地的并利用localIdentName。

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

利用上的回购

• 在~/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的默认作用域类名(，您可以将这个名称更改为任何您喜欢的名称，并且它仍然适用于上面的示例repo )。
• 将BPRCM添加到babel-loader规则中。
• 添加了一个模块配置，以将全局CSS规则切换到本地CSS规则。
• 删除局部模块CSS规则。
• 将所有classNames更改为styleName文件中的App.js文件。