如何从Webpack生成的NPM包中正确加载资产？

Question

20

我正在使用webpack生成适用于npm包的文件，该包将托管一些React组件。它们有一些附加的CSS，其中引用了一些字体和图标。

当使用file加载器时，在主应用程序中这些资源会被错误引用为绝对路径（例如fonts/my-font.woff），而这些路径是错误的。

有没有办法修复这个问题并使我的主应用程序寻找正确的文件？我更愿意修复包本身，而不是像someone has mentioned那样复制资产，因为我可能无法完全控制主应用程序。

- Pedro Nascimento

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bryce Howitson · Accepted Answer

首先，我要说明的是，在组件中包含字体通常不是一个好主意，因为主应用程序很可能有自己的样式/品牌等等，你将会与其竞争。

话虽如此，如果这些字体是类似于图标之类的东西，您可以对其进行base64编码，并在CSS中内联使用。有几个Webpack编码器插件可实现此功能。

您还提到了图标，我建议将它们转换为SVG并在代码中使用。您还可以将PNG文件进行base64编码，作为备用方案嵌入到CSS中。

这种方法的好处：

我能想到的缺点：