React组件库，如何正确地将字体与rollup捆绑在一起

Question

我正在开发一个项目，该项目有一个 React 组件库和一个导入所述库的 Next JS 应用程序。我读过很多关于 SO 的问题，并尝试了大多数解决方案，但均无济于事。

我们的组件库、字体等都可以正常工作，在故事书中看起来很棒

我们在 package.json 中导入了两种字体（在 devDependency 中）

"@fontsource/inter": "4.5.12",
"@fontsource/material-icons": "4.5.4",

材质图标字体已导入到我们的<Icon />组件中

import "@fontsource/material-icons";

并在 tailwind 配置中引用

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx,mdx}"],
  theme: {
    fontFamily: {
      sans: ["Inter", "ui-sans-serif", "sans-serif"],
      heading: ["Inter", "ui-sans-serif", "sans-serif"],
    },

这在故事书中没有问题

但是当导入到 Next JS 应用程序并使用相同的组件时

这些文件似乎在 Next JS 应用程序的 node_modules 文件夹中可用

这是汇总配置：

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import json from "@rollup/plugin-json";
import pkg from "./package.json";

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: pkg.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: pkg.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss(),
      json(),
    ],
    external: [
      "react",
      "react-dom",
      "@fontsource/inter/400.css",
      "@fontsource/inter/600.css",
      "@fontsource/inter/700.css",
      "@fontsource/material-icons",
      "react-loading-skeleton/dist/skeleton.css",
    ],
  },
  {
    input: "dist/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
    external: [
      "react",
      "react-dom",
      "@fontsource/inter/400.css",
      "@fontsource/inter/600.css",
      "@fontsource/inter/700.css",
      "@fontsource/material-icons",
      "react-loading-skeleton/dist/skeleton.css",
    ],
  },
];

问题：我理想的做法是从组件库中导出所有引用的 css，以便在下一个应用程序的 _app.tsx 中我可以使用

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

如何配置 rollup 以捆绑引用的 css 并将其公开在构建文件夹中？

另外：如果有替代或更好的方法来执行此操作，我们并不珍惜所使用的插件，并且愿意向您展示更好（或正确）的执行此操作的方法。

感谢任何帮助！

Answer 1

如果有人仍然在同一条船上 - 这就是我最终解决它的方法......

新的 rollup.config.js

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import json from "@rollup/plugin-json";
import pkg from "./package.json";
import copy from "rollup-plugin-copy";

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: pkg.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: pkg.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      postcss(),
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      json(),
      copy({
        targets: [
          {
            src: "node_modules/@fontsource/inter/files/*",
            dest: "./dist/files",
          },
          {
            src: "node_modules/@fontsource/material-icons/files/*",
            dest: "./dist/files",
          },
        ],
      }),
    ],
    external: ["react", "react-dom"],
  },
  {
    input: "dist/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
    external: ["react", "react-dom"],
  },
];

然后在 src/theme/input.css 中

@import url("../../node_modules/@fontsource/inter/400.css");
@import url("../../node_modules/@fontsource/inter/600.css");
@import url("../../node_modules/@fontsource/inter/700.css");
@import url("../../node_modules/@fontsource/material-icons/index.css");
@import url("../../node_modules/react-loading-skeleton/dist/skeleton.css");

@tailwind base;
@tailwind components;
@tailwind utilities;
...
foo {
  bar...

然后在我们使用的 Next 应用程序中，我不再需要@fontsource/font在 package.json 中导入。

在我看来，这是有效的，因为汇总构建时使用rollup-plugin-postcss，利用 css 导入并将所有内容捆绑在一起作为 css 的一部分，而不是尝试重新打包导入或管理来自消费应用程序的外部依赖项。

很确定我的汇总配置仍然可以缩减，特别是在我使用的地方rollup-plugin-copy复制@fontsource/font文件的地方。但目前这是有效的，意味着我们的消费应用程序不需要关心导入字体。

然而，这有一个缺点，因为我不确定如果我们想覆盖字体，这将如何工作。

也许重新定义inter也许在调用应用程序中然后再给它分配其他东西？

或者也许会覆盖fontFamily我们的顺风配置中的？尚未确定。当我有更好的答案时会更新。

希望这对其他人有帮助 - 当我有更多时间花在修剪汇总配置上时，我会发布最新的。

起亚奥拉！