babel-plugin-react-css-modules不会更改样式标签中的类名称
拉德克·阿努谢夫斯基
我想用来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;
马特·卡洛塔
兰特（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文件。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
将React 17与Webpack 5和babel-plugin-react-css-modules（具有样式名称的CSS模块）集成
- 2
Material-UI-支持babel-plugin-react-css-modules和rtl应用
- 3
带有React Native的Babel插件（babel-plugin-module-alias）
- 4
如何使用babel-loader加载babel-plugin-react-intl？
- 5
语义UI React更改样式占位符文本CSS
- 6
未定义React类（文本/ babel）
- 7
babel-eslint vs eslint-pluginbabel vs eslint-plugin-react？
- 8
babel-plugin-react-intl：将字符串提取到单个文件
- 9
意外令牌-React Babel
- 10
为什么在我的设置中需要使用“ @ babel / preset-env”和“ @ babel / preset-typescript”进行“ @ babel / plugin-proposal-optional-chaining”
- 11
在Babel 6中使用react-hot-loader
- 12
Babel，React — JSX块中的嵌套条件不起作用
- 13
使用babel-plugin-import测试Jest
- 14
我可以在react js包中更改样式吗？
- 15
通过onSubmit在React中更改表单的CSS样式
- 16
嵌入React / Babel：意外令牌
- 17
无法设置React / Babel / Webpack
- 18
无法设置React / Babel / Webpack
- 19
React中的Vanilla CSS？
- 20
使用css-modules基于prop更改react组件css
- 21
React native-动态更改样式
- 22
CSS模块，React和覆盖CSS类
- 23
带有CSS3的标签，点击时更改样式
- 24
jQuery返回2个标签以在没有可用ID时更改样式CSS
- 25
Webpack样式加载器与mini-css-extract-plugin
- 26
如何在React中更改CSS属性？
- 27
在Node v13中将@ babel / register用于React应用
- 28
为什么Babel在React-hot-loader中没有编译某些功能？
- 29
如何在Visual Studio Code中配置react，jsx和babel？
我来说两句