Rollup.js 没有捆绑我的 React 组件库字体

Posted 2023-02-19

【中文标题】Rollup.js 没有捆绑我的 React 组件库字体

【英文标题】：Rollup.js is not bundling my React Component Library fonts

【发布时间】：2021-10-14 12:32:29

【问题描述】：

当我使用 Storybook 查看我的 React 组件库时，一切正常。当我将库发布到 NPM 注册表时，我将它安装到一个虚拟的 React 应用程序中，除了字体之外，一切都按预期工作。下面是我的 rollup.config.js 插件：

plugins: [
    external(),
    babel(
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
    ),
    del( targets: ['dist/*'] ),
    postcss(),
    url(
      include: ['**/*.woff'],
      limit: Infinity,
    ),
    copy(
      targets: [ src: ['./src/fonts'], dest: 'dist' ],
    ),
],

这是我的 font.scss

@font-face 
  font-family: 'CustomFontExample';
  src: local('CustomFontExample'),
    url('/fonts/CustomFontExample.woff')
      format('woff')

我相信这个问题要么存在于我的 Rollup.config.js 中，要么我没有正确设置我的 @font-face 路径。我目前将其设置为相对路径，当我在 Storybook 中查看组件时，它工作得很好。

有人知道我该如何解决这个问题吗？

【问题讨论】：

你找到解决办法了吗？

@jamesemanon，你找到解决方案了吗？我开始了赏金活动。

不，我选择不提供字体。

【参考方案1】：

问题是字体文件的路径。

您设置的路径是相对于库的 root 目录的 - 意味着它是 your-library/fonts/CustomFontExample.woff' 的路径。但是捆绑将您的字体文件移动到your-library/dist/fonts/CustomFontExample.woff'。

问题的两种解决方案：

将字体目录的dest更改为库的根目录。 使用带句点的相对路径来指定路径 - 例如'./fonts/CustomFontExample.woff'（如果导入的 css 文件在 dist 目录中）。