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

在Daniel的一些提示之后，我试图以另一种方式安装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 2

Create react app v2支持babel宏。有一个NPM package for styled-components宏。只需添加软件包以创建react app，就完成了。

yarn add styled-components.macro --dev

执行此操作不需要弹出CRA。

Answer 3

有一种更简单的方法可以实现此目的，并且不需要弹出或安装任何其他软件包：

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

import styled from 'styled-components';

这样导入：

import styled from 'styled-components/macro';

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

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

3 个答案: