Css 如何从网页包生成的NPM包中正确加载资产？_Css_Reactjs_Npm_Webpack_Webpack File Loader

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

css reactjs npm webpack

Css 如何从网页包生成的NPM包中正确加载资产？,css,reactjs,npm,webpack,webpack-file-loader,Css,Reactjs,Npm,Webpack,Webpack File Loader,我正在使用webpack为npm包生成适当的文件，npm包将承载一些react组件。它们附带了一些CSS，其中引用了一些字体和图标使用文件加载器时，这些资产在主应用程序中使用其丢失的绝对路径（即字体/my font.woff）被错误引用有没有办法解决这个问题，让我的主应用程序寻找正确的文件？我宁愿修复软件包本身，也不愿做复制资产之类的事情，因为我可能无法完全控制主应用。好吧，我想在序言中说，在组件中包含字体通常是一个坏主意，因为主应用可能有自己的风格/品牌/等等，你会遇到麻烦也就是说，如果

我正在使用webpack为npm包生成适当的文件，npm包将承载一些react组件。它们附带了一些CSS，其中引用了一些字体和图标

使用

文件

加载器时，这些资产在主应用程序中使用其丢失的绝对路径（即

字体/my font.woff

）被错误引用

有没有办法解决这个问题，让我的主应用程序寻找正确的文件？我宁愿修复软件包本身，也不愿做复制资产之类的事情，因为我可能无法完全控制主应用。

好吧，我想在序言中说，在组件中包含字体通常是一个坏主意，因为主应用可能有自己的风格/品牌/等等，你会遇到麻烦

也就是说，如果字体类似于图标，您可以对其进行base64编码，并将其内联到CSS中。有几个网页包编码器插件可以做到这一点

您还提到了图标，我将尝试将它们转换为SVG，并在代码中提供它们。您还可以将PNG编码到CSS中作为后备方案

这种方法的好处：

消除父应用程序中的HTTP请求
更新软件包时，父应用程序始终具有最新（非缓存）的图标/字体
您不必担心路径、打包外部文件等问题

我能想到的缺点：

您正在显著增加脚本大小
您将失去一些缓存好处