React-hot-loader: Texts disappear after hot-reload perhaps due to font load

[lichao-hulu]

1. Define font classes using @font-face
2. Define font mixins using font classes
3. Use font mixins in scss
4. Use webpack css-loader!scss-loader to load the scss files
5. access web application

Observed:
All texts are there after first load
After make a css code change, which triggers hot load, all texts are gone
Make any css change within browser, all texts will be back

In console, font file will be reloaded due to @font-face src attribute, not sure whether the problem is caused by this.

[huijian3139]

Good catch ! Super sister

[krzysztofpniak]

Have you found any solution for this? Anyways, I'm sure that this is not related to react-hot-loader. I have a project with exactly the same problem and I do not have react hot loader there. I think it is rather a problem with Hot Module Replacement in webpack.

[calesce]

Yeah, this doesn't seem related to React Hot Loader, I'd recommend taking a look at one of the CSS/SCSS loaders, or possibly Webpack itself.

[ramilzakirov]

I had an identical problem. It has turned out to solve through the use of url-loader instead of file-loader for fonts files, but only to development webpack config.

{
  test: /\.(eot|svg|ttf|woff|woff2)$/,
  loader: 'url-loader', // file-loader for production
},

[ponelat]

@ramilzakirov thank you. This has been a PITA for a while!