在 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 或 styled-components 方面犯了错误。有人有一个带有工作样式组件 babel 插件的示例项目吗？

Answer 1

经过大牛的一些提示，我尝试了另一种安装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 2

Create React App v2 支持 babel 宏。有一个 NPM package for styled-components 宏。只需添加包来创建 React 应用程序就大功告成了。

yarn add styled-components.macro --dev

这样做不需要弹出 CRA。

Answer 3

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

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

import styled from 'styled-components';

像这样导入：

import styled from 'styled-components/macro';

如果这对您不起作用，您可能需要更新样式组件或做出反应。可以在 styled-components documentation.

中找到更多信息

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

Install babel-plugin-styled-components in create-react-app

reactjs

babeljs

styled-components