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

Question

我正在尝试将 styled-components-babel-plugin 与 create-react-app 应用程序一起使用，以在我的 chrome 开发工具中将组件名称作为类名。但不知何故，我没有改变类名。我按照网站上的描述安装了 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 应用程序即可完成。

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，以便能够使用它。因此，对于 styled-components 插件，package.json 中的 babel 部分现在如下所示：

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

现在插件可以工作了，我很高兴 =) 感谢 Daniel 为我指明了正确的方向！

Answer 4

我遇到了同样的问题，这是我解决此错误的方法：

我使用

styled-components.macro

安装了

npm

。

npm i styled-components.macro --dev

然后像这样使用它：

import styled from 'styled-components/macro';