reactjs React组件库，如何正确地将字体与汇总绑定

slmsl1lt 于 2022-12-29 发布在 React

关注(0)|答案(1)|浏览(116)

我正在做一个有React组件库的项目，还有一个导入该库的Next JS应用程序，我读了很多关于SO的问题，尝试了很多解决方案都没有用。
我们有组件库的工作，字体和所有，并在故事书看起来很棒
我们在package.json（devDependencies）中导入了两种字体

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

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

import "@fontsource/material-icons";

并在顺风配置中引用

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";

如何配置汇总以绑定引用的css并在build文件夹中公开它？

- 另外：**如果有替代或更好的方法，我们并不看重所使用的插件，并愿意接受更好（或正确）的方法。

感谢您的帮助!

reactjs

来源：https://stackoverflow.com/questions/73868885/react-component-library-how-to-correctly-bundle-fonts-with-rollup

1条答案

按热度按时间

nr7wwzry1#

如果有人仍然在同一条船上-这是我如何解决它在最后...
新的汇总配置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/主题/输入. 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应用程序中，我不再需要在package.json中导入@fontsource/font。
在我看来，这是可行的，因为使用rollup-plugin-postcss的汇总构建利用了css导入，并将所有内容捆绑在一起作为css的一部分，而不是试图重新打包导入或管理消费应用的外部依赖。
我确信我的汇总配置仍然可以被削减，特别是在我使用rollup-plugin-copy复制@fontsource/font文件的地方，但现在这是有效的，这意味着我们的消费应用程序不需要关心字体的导入。
然而，这也有缺点，因为我不知道这将如何工作，如果我们想覆盖字体。
也许在调用应用程序中重新定义inter字体，然后给它分配其他内容？
或者可能在我们的顺风配置中覆盖fontFamily？还不确定。当我有更好的答案时会更新。
希望这对其他人有帮助-当我有更多的时间花在修剪汇总配置，我会张贴最新的。
起亚奥拉！

赞(0）回复(0）举报 2022-12-29

我来回答

reactjs React组件库，如何正确地将字体与汇总绑定

1条答案

相关问题

热门标签

最新问答