使用Rollup打包Chakra UI组件库后样式丢失问题求助

我使用TypeScript、React和Chakra UI构建组件库，通过Rollup完成打包并使用npm link测试时，发现除主题配置外，所有CSS样式均丢失。组件样式均通过Chakra UI的主题及组件props设置，无独立CSS文件。以下是我的配置文件，寻求解决方法：

Rollup配置 #

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import terser from "@rollup/plugin-terser";
import external from "rollup-plugin-peer-deps-external";
import dts from "rollup-plugin-dts";
import svgr from "@svgr/rollup";
import packageJson from "./package.json" assert { type: "json" };

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
        name: "react-lib",
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    external: Object.keys(packageJson.peerDependencies),
    plugins: [
      external(),
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      terser(),
      svgr(),
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    external: [/\.css$/],
    plugins: [dts()],
  },
];

package.json #

{
  "name": "name-of-file",
  "version": "0.0.1",
  "description": "Vivly's Internal Component Library",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/index.d.ts",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "author": "uhuh",
  "license": "ISC",
  "peerDependencies": {
    "react": "^18.2.0",
    "@chakra-ui/react": "^2.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@chakra-ui/icons": "^2.0.17",
    "@chakra-ui/react": "^2.5.1",
    "@chakra-ui/storybook-addon": "^4.0.16",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@rollup/plugin-commonjs": "^24.0.1",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-terser": "^0.4.0",
    "@rollup/plugin-typescript": "^11.0.0",
    "@storybook/addon-actions": "^7.0.0-beta.59",
    "@storybook/addon-essentials": "^7.0.0-beta.59",
    "@storybook/addon-interactions": "^7.0.0-beta.59",
    "@storybook/addon-links": "^7.0.0-beta.59",
    "@storybook/addon-mdx-gfm": "^7.0.0-beta.59",
    "@storybook/react": "^7.0.0-beta.59",
    "@storybook/react-webpack5": "^7.0.0-beta.59",
    "@storybook/testing-library": "^0.0.14-next.1",
    "@svgr/rollup": "^6.5.1",
    "@types/react": "^18.0.28",
    "@types/rollup-plugin-peer-deps-external": "^2.2.1",
    "babel-loader": "^8.3.0",
    "framer-motion": "^10.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "recharts": "^2.4.3",
    "rollup": "^3.17.3",
    "rollup-plugin-dts": "^5.2.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "storybook": "^7.0.0-beta.59",
    "typescript": "^4.9.5"
  }
}

tsconfig.json #

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

解决方法 #

1. 补充Peer Dependencies #

Chakra UI依赖@emotion/react和@emotion/styled实现css-in-js，需要将这两个包加入peerDependencies，确保用户项目提供统一版本，避免样式注入冲突：

"peerDependencies": {
  "react": "^18.2.0",
  "@chakra-ui/react": "^2.5.1",
  "@emotion/react": "^11.0.0",
  "@emotion/styled": "^11.0.0",
  "framer-motion": "^10.0.0"
}

2. 修改TypeScript的JSX配置 #

Chakra UI需要React 17+的自动JSX导入支持，将tsconfig.json中的jsx字段改为react-jsx：

"jsx": "react-jsx"

3. 配置Rollup处理Emotion语法 #

添加@rollup/plugin-babel并配置Emotion插件，确保Chakra组件的样式代码被正确编译：

• 安装依赖：

npm install @rollup/plugin-babel @emotion/babel-plugin --save-dev

• 修改Rollup配置，在plugins数组中加入babel配置：

import babel from "@rollup/plugin-babel";

// ... 其他插件
plugins: [
  external(),
  resolve(),
  commonjs(),
  babel({
    exclude: "node_modules/**",
    presets: ["@babel/preset-react"],
    plugins: ["@emotion/babel-plugin"],
    babelHelpers: "bundled"
  }),
  typescript({ tsconfig: "./tsconfig.json" }),
  terser(),
  svgr(),
],

4. 测试项目配置检查 #

确保测试项目中：

• 正确包裹ChakraProvider，并引入组件库的主题配置
• 已安装所有peer依赖包（包括@emotion/react、@emotion/styled）

5. 重新打包并测试 #

执行npm run build重新打包组件库，然后在测试项目中重新执行npm link并重启项目，验证样式是否恢复。

内容的提问来源于stack exchange，提问作者siddarth saha