用 NextJS 设置情感 babel 插件？答案

【问题标题】：Set up emotion babel plugin with NextJS?用 NextJS 设置情感 babel 插件？
【发布时间】：2019-12-21 19:16:09
【问题描述】：

我正在尝试使用 NextJS 设置情感 babel 插件。

我创建了一个新的 NextJS 项目。然后安装@emotion/core和babel-plugin-emotion

在 package.json 中：

  "dependencies": {
    "@emotion/core": "^10.0.15",
    "babel-plugin-emotion": "^10.0.15",

我已经在我的项目根目录中创建了一个 .babelrc 文件：

{
  "presets": ["next/babel"],
  "plugins": ["emotion"]
}

如果我以正常的方式使用情感：

import React from "react";
/** @jsx jsx */
import { css, jsx } from "@emotion/core";

const style = css`
  opacity: 0.4;
  background: gold;
`;

function Component({ number }) {
  return (
    <div css={style} />
  );
}

我认为 babel 插件允许我使用这种更简洁的语法：

import React from "react";
import { css } from "@emotion/core";

const style = css`
  opacity: 0.4;
  background: gold;
`;

function Component({ number }) {
  return (
    <div css={style} />
  );
}

但是它不起作用。这是呈现的 HTML：

<div css="[object Object]" />

【问题讨论】：

标签： babeljs next.js emotion

【解决方案1】：

不确定这是否是最终更改，但这是我对现有情感项目的配置，我在设置时引用了这些 Emotion docs

// .babelrc.js file

env: {
    development: {
      presets: [
        "next/babel",
        [
          require.resolve('@emotion/babel-preset-css-prop'),
          {
            sourceMap: true,
            autoLabel: true,
          },
        ],
      ],
    },
    production: {
      presets: ["next/babel", [require.resolve('@emotion/babel-preset-css-prop'), { hoist: true }]],
    },
  },

【讨论】：