我正在使用 webpack 为将托管一些反应组件的 npm 包生成适当的文件。他们附加了一些 CSS，其中引用了一些字体和图标。
使用加载器时，这些资产在主应用程序中file使用它们的绝对路径（即 ）被错误引用，而这些路径是缺失的。fonts/my-font.woff
有没有办法解决这个问题并让我的主应用程序查找正确的文件？我宁愿修复包本身，也不愿像有人提到的那样复制资产，因为我可能无法完全控制主应用程序。
问问题
2751 次
1 回答
3
好吧，我首先要说在组件中包含字体通常是一个坏主意，因为主应用程序可能有自己的风格/品牌/等，你会与之抗争。
也就是说，如果字体类似于图标，您可以对它们进行 base64 编码并将其内联到 CSS 中。有几个 Webpack 编码器插件可以做到这一点。
您还提到了图标，我会尝试将它们转换为 SVG 并在代码中提供它们。您还可以将 PNG 进行 base64 编码到您的 CSS 作为后备。
这种方法的好处：
- 消除父应用程序中的 HTTP 请求
- 更新包时，父应用程序始终具有最新（非缓存）图标/字体
- 您不必担心路径、打包外部文件等
我能想到的缺点：
- 您正在显着增加脚本大小
- 您失去了一些缓存优势
- 如果您不是图标/字体的版权所有者，这可能违反 TOS
于 2019-02-10T18:03:33.590 回答