Local @font-face files not loading when using npm run start

[nebulousGirl]

When loading font files directly from SCSS files, they do not load properly with npm run start, but work correctly when doing npm run build.

[nebulousGirl]

I've found that publicPath is undefined in my webpack config rules generated by wpackio.

[nebulousGirl]

[ { loader: 'file-loader', options: { name: '[name]-[hash:8].[ext]', outputPath: 'web/assets/', publicPath: undefined } } ]

[nebulousGirl]

If I manually navigate to the file, it exists, but it doesn't load at all in the browser from the browserSync blob. I don't see the file in Network.

Sorry, for all those comments, I'm commenting as I debug and find new stuff.

[Deejay-Ste]

Hi, I have the same issue. Any ETA on this ?

[swashata]

Hi,

I will take a look.

[swashata]

Hi,

Could you please give me a repo for reproduction? I have checked some asset files and they do seem to work.

[swashata]

I have checked with specific .woff files and they do work. Please share a repro repo so that I can look into it.

Also make sure you are on version 3.5.0 or greater.

[Deejay-Ste]

Hi, I don't have time to make a repo for this but it's actually pretty simple to reproduce. You have to make a fresh WordPress install and apply the example theme of this repo (this one), then install npm and composer dependencies. After add some fonts in the assets directory and declare them in src/theme/main.scss. Then run npm run start and you'll end up with the Webpack dev server running but the fonts won't be loaded (as seen on the screenshot).

[Deejay-Ste]

Although if you run npm run build they'll load correctly.

[swashata]

Maybe it had something to do with style-loader. Please upgrade to v4.1.0. I have removed style loader in favor of HMR from mini-css-extract-plugin.

[Deejay-Ste]

Thanks, I tested the v4.1.0 and it works now. Like you said it might be because of style-loader. You can close this issue.

[swashata]

Great...