如何在umi中使用twin.macro

[DemonSam]

node:16.15.0
创建项目 npx create-umi@latest
Template: Ant Design Pro
创建tailwindcss npx max g taillwindcss
安装twin.macro pnpm add twin.macro -D

"dependencies": {
    "@ant-design/icons": "^4.8.3",
    "@ant-design/pro-components": "^2.6.52",
    "@umijs/max": "^4.1.5",
    "antd": "^5.15.3"
  },
  "devDependencies": {
    "@types/react": "^18.2.69",
    "@types/react-dom": "^18.2.22",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
    "prettier": "^3.2.5",
    "prettier-plugin-organize-imports": "^3.2.4",
    "prettier-plugin-packagejson": "^2.4.12",
    "twin.macro": "^3.4.1",
    "typescript": "^5.4.3",
    "tailwindcss": "^3"
  }

运行后报错 TypeError: Unable to determine current node version

请问该如何正确使用 twin.macro

[fz6m]

如果你要使用 twin.macro ，就得关掉 mfsu: false ，因为 mfsu 不支持宏。

这是我可以跑通的一个最小例子：

  pnpm add -D babel-plugin-twin babel-plugin-macros

// .umirc.ts

  // 打开 tailwind 功能，确保你有 `tailwind.config.js` ，这可以是 `max g taillwindcss` 生成出来的
  tailwindcss: {},

  extraBabelPlugins: [
    'babel-plugin-twin',
    'babel-plugin-macros',
  ],
  mfsu: false,

import tw from 'twin.macro'

const Component = tw.div`border hover:border-black`

<Component>1111</Component>

使用 styled-components 时，基于上文配置再添加以下配置：

// .umirc.ts

  styledComponents: {},

// package.json

  "babelMacros": {
    "twin": {
      "preset": "styled-components",
    }
  }

// src/twin.d.ts

// copy https://github.com/ben-rogerson/twin.examples/blob/master/webpack-styled-components-typescript/types/twin.d.ts

import { styled } from 'twin.macro'

const Component = styled.div`
  color: blue;
`;

由于 twin 默认 css in js 使用的是 emotion ，但 umi 只提供了 SC 的插件（在这个插件里帮你做了 SC 的 babel 插件配置和 context 注入），所以如果你需要用 emotion ，需要自己研究配一下 emotion 才能使用。

关于更多信息，可以参考 twin 的官方 examples 仓库。

[DemonSam]

非常感激，可以正常使用了