Menu
I'm using webpack to generate the appropriate files for a npm package which will host a few react components. They have some CSS attached, which references some fonts and icons.
When using the file loader, these assets are mis-referenced using their absolute paths (i.e. fonts/my-font.woff) in the main app which are missing.
Is there a way to fix this and make my main app look for the right files? I'd rather fix the package itself than doing things like copying the assets like someone has mentioned as I may not have full control of the main app.
644
By default, this plugin will remove all files inside webpack's output. path directory, as well as all unused webpack assets after every successful rebuild.
You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script. But that's just the bare minimum it can do.
Webpack is a command line tool to create bundles of assets (code and files). Webpack doesn't run on the server or the browser. Webpack takes all your javascript files and any other assets and transforms then into one huge file. This big file can then be sent by the server to a client's browser.
Well, I'm going to preface this by saying that including fonts in a component is usually a bad idea since the main app likely has its own style/branding/etc that you'll be fighting with.
That said, if the fonts are something like icons you could base64 encode them and inline that in the CSS. There are several Webpack encoder plugins to do that.
You also mentioned icons, I would try to convert these to SVG and serve them up inside the code. You could also base64 encode the PNGs into your CSS as a fallback.
The benefits, to this approach:
Cons I can think of:
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
