Create-react-app: Webpack generates wrong paths for fonts in css

[iRoachie]

Referencing a font-face for a local file produces wrong paths when using run build.

Example structure:

/src
  /assets
    /fonts
      fonts.css
      font.ttf

In fonts.css i reference the font as url(./font.ttf) since they're in the same directory. After run build it produces the following css in static/css.

url(./static/media/font.ttf)

build folder structure

/static
  /css
    main.css
  /media
    font.ttf

So the css is looking for the font file in css/static/media/font.tff, when it should really be ../media/font.ttf

[gaearon]

After run build it produces the following css in static/css.

I can’t reproduce this with default settings.

Do you have a homepage field in package.json?
If yes, what is it set to?

[iRoachie]

./

[gaearon]

That’s where the issue comes from. I guess we just don’t support the use case of building when root application path is unknown.

[gaearon]

We’ll offer an escape hatch in 0.5.0 with a public folder though so maybe you could use that as a last resort if you really need to deploy the same build to different paths.

[iRoachie]

Ohh i see. Alright thanks. Will use a cdn in the mean time

[gaearon]

👍

[Timer]

Hi there! react-scripts v0.9.0 was just released which adds support for building for relative paths. You may read how to do so here.

Please test it and don't hesitate to reach out if this doesn't solve your specific use case!

[jiayouwyhit]

I have a similar issue and found that this solution solved my problem: got wrong bootstrap font path after building