Why does Webpack add a prefix when building?

Question

webpack

Hey!

I am doing a production build, Webpack 5.
There is a problem with fonts, there is an assets/fonts.css file, it contains lines like:

@font-face {
...
...
src: url(./fonts/someMagicFont.woff);
}

Fonts.css is then simply imported into index.tsx.

Output.publicPath contains the string: "/my/static/"

Expected behavior: in dist, when building, fonts' src will be replaced with /my/static/[someHashedFont]
In fact, src is: file:///my/static/[ someHashedFont ]

Where does file:// come from and how can I fix it?

Answer 1

Have you opened the finished css file in the editor and saw such paths in it? Hard to believe.
Probably you open the html file just by double clicking?
In this mode, fonts, unlike images, will not be loaded.
Place the file on the server (you can local) and open it via http protocol.