在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

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

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

import styled from 'styled-components';

像这样导入：

import styled from 'styled-components/macro';

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

Answer 2

Create react app v2支持babel宏。有一个NPM包，用于样式组件宏。只需添加软件包以创建react app，即可完成。

yarn add styled-components.macro --dev

这样做不需要退出CRA。

Answer 3

在丹尼尔的一些提示之后,我试图以另一种方式安装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指出我正确的方向!