Laravel + Tailwind = font files not loading

[ghost]

I am using Laravel 7 and Tailwind, with Laravel Mix (6.0.0-beta.17) to compile. I've added a font via fontsource, but the actual font files 404.

If I manually move the missing files to the public/css/files directory, everything works fine.

Here is my webpack.mix.js file:

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/footer.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [
            tailwindcss('tailwind.config.js'),
        ]
    })
    .vue();

I think it may have something to do with the .options, but if I remove them, my Tailwind doesn't compile and my CSS breaks.

Can anyone point me in the right direction? Thank you!

[ayuhito]

I have a feeling that this is an issue with Laravel Mix not resolving the CSS file font files properly. I've seen other bundlers not account for this previously and push fixes when their relevant users report it.

An alternative clear solution to this is also #133 which is an open issue.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs. Thank you for your contributions.
Use the 'not stale' label to prevent the issue from automatically closing.

[Lloydinator]

I'm having this problem right now. Does anyone have any tips?

[ayuhito]

I'm having this problem right now. Does anyone have any tips?

@Lloydinator, could you try setting processCssUrls to true in the options() section of webpack.mix.js?

The reason why the fonts are 404ing is due to the CSS URLs not processing correctly. However, I'm not sure if that breaks another part of your build like Tailwind.

[austriker27]

I'm having this problem right now. Does anyone have any tips?

@Lloydinator, could you try setting processCssUrls to true in the options() section of webpack.mix.js?

The reason why the fonts are 404ing is due to the CSS URLs not processing correctly. However, I'm not sure if that breaks another part of your build like Tailwind.

Im getting this issue with a project that uses laravel mix and sadly processCssUrls: true, does not fix the incorrect font file paths