Wrong paths for fonts when setting homepage to "."

[themre]

Description

From 0.6.0 on I'm experience this bug, where links from Fontawesome are broken. This goes for fonts, that are referenced in the Fontawesome CSS.

Expected behavior

Link to fonts should be e.g. build/static/media/fontawesome-webfont.1dc35d25.ttf

Actual behavior

Link in css produces: build/static/css/static/media/fontawesome-webfont.1dc35d25.ttf. This goes for TTF, WOFF and WOFF2.

Environment

1. react-scripts 0.6.1 (if you haven’t ejected):
2. node 6.3.0:
3. npm 3.10.3:
4. font-awesome 4.6.3
5. Operating system: Windows 10 64-bit
6. Browser and version: All

Usage

I import fonts like this: import 'font-awesome/css/font-awesome.css'

[themre]

I found out this was the cause of homepage: '.' in package.json. I wanted this since I don't have yet specified final website URL and I wanted it to send to someone to check it locally (run index.html or to put on some non-root folder on some host). Obviously this won't work. Any other solution?

[gaearon]

Yeah, this is not really officially supported as we found a few similar issues with it. If you want to keep using that workaround, you’ll need to use public folder for any assets and manage them manually instead so that Webpack doesn’t get confused about paths.

Alternatively you could investigate what it would take to support . officially and make a PR fixing those issues. Maybe with some tweaks to configuration it would be possible.

[robcaldecott]

I have an ugly fix for this but instead opted for the public folder as this fixes the issue.

[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!