如何用Rollup正确打包React组件库中的字体资源

一、修改Rollup配置打包独立CSS文件 #

1. 调整PostCSS插件配置 #

修改Rollup配置中的postcss插件，开启独立CSS文件输出，并配置字体资源处理：

postcss({
  extract: 'dist/styles.css', // 指定输出的独立CSS文件路径
  modules: false, // 全局样式无需启用CSS Modules
  plugins: [
    require('postcss-url')({
      url: 'copy',
      assetsPath: 'fonts', // 字体文件会被复制到dist/fonts目录
      useHash: true, // 可选：给字体文件添加哈希值避免缓存问题
    }),
  ],
}),

2. 移除External中的CSS依赖 #

将external数组内所有CSS相关项删除，确保Rollup会把这些样式文件打包进组件库，而非当作外部依赖：

external: [
  "react",
  "react-dom"
],

3. 配置package.json暴露样式文件 #

在组件库的package.json中添加字段，确保样式文件能被正确识别和引用：

{
  "files": ["dist"],
  "style": "dist/styles.css"
}

二、组件库入口统一导入所有样式 #

在组件库的src/index.ts中，集中导入所有需要的字体样式和全局样式：

// 导入Inter字体各权重样式
import "@fontsource/inter/400.css";
import "@fontsource/inter/600.css";
import "@fontsource/inter/700.css";
// 导入Material Icons字体
import "@fontsource/material-icons";
// 导入其他全局样式
import "react-loading-skeleton/dist/skeleton.css";

三、Next.js应用中引入组件库样式 #

在Next.js的_app.tsx或globals.css中，直接导入组件库打包好的样式：

import "@us/component-library/styles.css";

更优实现方案 #

1. 调整字体依赖位置 #

将@fontsource/inter和@fontsource/material-icons从devDependencies移到dependencies，确保使用组件库的项目能自动安装字体依赖，避免缺失字体文件。

2. 组件库内置Tailwind编译 #

如果组件库使用Tailwind，建议在组件库内完成Tailwind样式编译，无需让Next.js项目处理：

1. 在组件库中创建src/styles/tailwind.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

2. 在src/index.ts中导入该文件：

import "./styles/tailwind.css";

Rollup会将Tailwind的基础样式、组件样式和工具类一并打包到styles.css中。

3. 手动复制字体文件（可选） #

若PostCSS处理字体出现问题，可添加rollup-plugin-copy手动复制字体文件：

import copy from "rollup-plugin-copy";

// 在Rollup的plugins数组中添加
copy({
  targets: [
    {src: "node_modules/@fontsource/inter/files/*", dest: "dist/fonts/inter"},
    {src: "node_modules/@fontsource/material-icons/files/*", dest: "dist/fonts/material-icons"}
  ]
})

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