在 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 插件弹出并手动安装插件，就无法将 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。只需添加包以创建 React 应用即可。

yarn add styled-components.macro --dev

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

Answer 3

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

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

import styled from 'styled-components';

像这样导入：

import styled from 'styled-components/macro';

如果这对您不起作用，您可能需要更新样式组件或做出反应。更多信息请访问styled-components documentation。