Question

我正在尝试使用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]" />

Answer 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 }]],
    },
  },

使用NextJS设置情感Babel插件？

1 个答案: