1

我想用来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;
4

1 回答 1

4

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 ，如此处，此处和已弹出（第 432-456 行 - 它使用包）[file/folder]_[local]_[hash]中提到的。config/webpack.config.jsreact-dev-utils/getCSSModuleLocalIdent

为了解决这些冲突，您需要建立一个localIdentName（默认情况下 BPCRM 使用这个generateScopedName：[path]___[name]__[local]___[hash:base64:5]（表中的第 4 个选项），所以我'将在下面的示例中使用它），然后您需要将 BPRCM 添加到webpack.config.js下面，babel-loader因为 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 规则。
  • 在App.js文件中全部更改classNames为。styleName
于 2020-01-18T18:54:38.123 回答