Reactjs 在CreateReact应用程序中安装babel插件样式的组件

我正在尝试将样式化组件babel插件与CreateReact应用程序一起使用，以便在我的ChromeDev工具中将组件名称作为类名。但不知何故，我没有改变类名。我安装了Babel和网站上描述的插件，并创建了我的.babelrc，如下所示：

{
  "presets": ["env"],
  "plugins": ["babel-plugin-styled-components"]
}

  "babel": {
    "presets": [
      "react-app"
    ]
  }

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": ["babel-plugin-styled-components"]
  }

import styled from 'styled-components';

import styled from 'styled-components/macro';

---

我尝试了很多预设组合（包括react app）和其他babel配置，也尝试在package.json中实现，但我无法让它工作。问题是，我从未使用过巴贝尔，几乎不知道我为什么需要它。所以我不知道我是否在babel或styled components方面犯了错误。有人有一个使用babel插件的样例项目吗

在Daniel的一些提示之后，我尝试用另一种方式安装babel插件。事实证明，如果不弹出babel插件并手动安装该插件，就无法将其添加到CreateReact应用程序（）中。为此，我运行了以下命令：

npm run eject
npm install --save-dev babel-plugin-styled-components

在那之后，我得到了一大堆新文件，我的package.json变得更大了，但也包括了巴贝尔的一部分，如下所示：

{
  "presets": ["env"],
  "plugins": ["babel-plugin-styled-components"]
}

  "babel": {
    "presets": [
      "react-app"
    ]
  }

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": ["babel-plugin-styled-components"]
  }

import styled from 'styled-components';

import styled from 'styled-components/macro';

剩下要做的就是在那里添加babel插件，以便能够使用它。因此，对于styled components插件，package.json中的my babel部分现在如下所示：

{
  "presets": ["env"],
  "plugins": ["babel-plugin-styled-components"]
}

  "babel": {
    "presets": [
      "react-app"
    ]
  }

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": ["babel-plugin-styled-components"]
  }

import styled from 'styled-components';

import styled from 'styled-components/macro';

---

现在插件工作了，我很高兴=）谢谢丹尼尔为我指出了正确的方向

Create react app v2支持babel宏。有一个用于样式化组件的宏。只需添加创建react应用程序的包，您就完成了

yarn add styled-components.macro --dev

---

这样做不需要弹出CRA。

有一种更简单的方法来实现这一点，并且不需要弹出或安装任何附加软件包：

而不是像这样导入样式化组件：

{
  "presets": ["env"],
  "plugins": ["babel-plugin-styled-components"]
}

  "babel": {
    "presets": [
      "react-app"
    ]
  }

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": ["babel-plugin-styled-components"]
  }

import styled from 'styled-components';

import styled from 'styled-components/macro';

按如下方式导入：

{
  "presets": ["env"],
  "plugins": ["babel-plugin-styled-components"]
}

  "babel": {
    "presets": [
      "react-app"
    ]
  }

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": ["babel-plugin-styled-components"]
  }

import styled from 'styled-components';

import styled from 'styled-components/macro';

---

如果这对您不起作用，那么您可能需要更新样式化组件或作出反应。更多信息请参见。

您是否已将babel loader添加到您的网页配置中？Babel通常会将更现代的JS语法转换为更旧的语法（浏览器会使用），尽管Babel插件还有很多其他功能。。就像这一个，我没有一个网页包配置。我试图让它运行，但因为我不知道，我在做什么，我也被困在这里。我安装了一些东西，收到了一些错误消息，现在我有了一个webpack配置，但是webpack运行会导致一个语法错误，它无法识别jsx语法。这些爵士乐真的有必要吗？毕竟，我使用了一个createreact应用程序来启动这个项目。是不是有一些网页在引擎盖下使用，我可以更新？嗨。我刚刚检查过，内部创建的react应用程序使用了这两个网页，这里似乎讨论了如何使用定制的babelrc。希望能有帮助。如果不是这样，imo最好是从头开始设置配置，这样就完全透明了。。但这可能需要一段时间，因为webpack一开始就是一个野兽：-）顺便说一句，有很多样板（比如webpack react babel bla bla样板）可以从中获得灵感，我的意思是除了安装插件外，.babelrc的实际内容不在.babelrc中，而是在package.json文件中，就像在文档中，它不是在当时，但谢谢你的提醒！Alex Mckay的回答帮助了我：还可以从

样式化组件/宏导入
，这里是支持Alex回答的实际部分的链接