在create-react-app中安装babel-plugin-styled-components

Question

我正在尝试将styled-components-babel-plugin与create-react-app应用程序一起使用，以便在我的chrome dev工具中将组件名称作为classname。 但不知何故，我没有让类名改变。 我安装了Babel和网站上描述的插件，并创建了我的.babelrc，如下所示：

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

我尝试了很多预设组合（包括react-app）和其他babel配置，也尝试在package.json中进行，但我无法让它工作。 问题是，我从未使用过babel而且几乎不知道，为什么我需要它。 所以我不知道，如果我在babel或样式组件方面犯了错误。 有没有人有一个带有工作样式组件babel插件的示例项目？

Answer 1

创建反应应用程序v2支持babel宏。 风格组件宏有一个NPM包 。 只需添加包以创建反应应用程序即可完成。

yarn add styled-components.macro --dev

这样做不需要弹出CRA。

Answer 2

在丹尼尔的一些提示之后，我试图以另一种方式安装babel插件。 事实证明，你不能将一个babel插件添加到create-react-app（ https://github.com/facebookincubator/create-react-app/issues/2611 ）而不弹出它并手动安装插件。 为此，我运行了这些命令：

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

在那之后，我得到了一大堆新文件，我的package.json变大了，但也包括了像这样的babel部分：

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

剩下要做的就是在那里添加babel-plugin，以便能够使用它。 所以对于样式组件插件，package.json中的babel部分现在看起来像这样：

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

现在插件工作，我很高兴=）感谢Daniel指出我正确的方向！

Answer 3

有一种更简单的方法来实现这一点，它不需要弹出或安装任何其他包：

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

import styled from 'styled-components';

像这样导入：

import styled from 'styled-components/macro';

如果这对您不起作用，您可能需要更新样式组件或做出反应。 更多信息可以在样式组件文档中找到 。