Laravel-mix: laravel mix add hash to the name of font file in output css

[pixieaka]

=== App.scss file ===

=== Output ===

=== Browser page source code ===

=== Output css folder in public directory ===

=== Result in browser ===

=== glyph font in bootstrap-sass also ===

=== My webpack.mix.js ===

[JeffreyWay]

That's for cache-busting purposes. It won't break anything.

I think what you're seeing is unrelated to the query. I just created a fresh project, installed font-awesome, compiled everything down, and then added:

<i class="fa fa-music">

to the page. It all worked.

[pixieaka]

I think it problem on Windows system only.

[pixieaka]

on chrome 56.0.2924.87 (64-bit)

on edge 38.14393.0.0

[eblin]

@pixieaka Make sure your fonts are in public/fonts NOT in public/css/fonts, from the screenshots above that seems to be the case.

[pixieaka]

in browser font link is

http://pixie/fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad

but my develop url is

http://pixie/app/public/

it skip "app/public/" and i don't know why ,, in elixier it work great but in mix very weird

but when i run php artisan serve command the icons work great on http://127.0.0.1:8000/

---

http://pixie/app/public/

php artisan serve

[shulard]

Maybe you just need to define the APP_URL Laravel constant to http://pixie/app/public/ ?

[pixieaka]

No the problem is not in APP_URL because ( css / js ) files is OK. but the problem in fonts only.

[bitdagger]

If you take off the leading / in your CSS (fonts/blah instead of /fonts/blah) does it fix the problem?

[kohenkatz]

@pixieaka You need to use the mix.setResourceRoot function to fix this.

By default, Mix's Webpack configuration adds a leading slash to the paths to fonts and images. Setting a different path (don't forget leading and trailing slashes) using the function I mentioned will use the path you set instead of a single /.

[kohenkatz]

Typically though, you should try to avoid a setup like this - instead set the webserver to use the app\public folder as the web root. If you don't do that, you're going to get people who are trying to explore your project's hidden parts by searching for files above the public directory.

[eblin]

@pixieaka Your problem is exactly what @kohenkatz described with your server being configured wrong.

The reason everything works fine when you run php artisan serve is because laravel is really just setting up the built-in php server to run the server.php (in the root of your project you can see this file), which routes everything to public/index.php

This is the recommended setup as mentioned in the docs:

Public Directory
After installing Laravel, you should configure your web server's document / web root to be the public directory. The index.php in this directory serves as the front controller for all HTTP requests entering your application.

you can see how this works at vendor/laravel/framework/src/Illuminate/Foundation/Console/ServeCommand.php

Just set your webroot in your server to go to public folder 👍

[pixieaka]

Thank you guys for helping me . The problem is solved.

[ghost]

@pixieaka how did u fix that, i couldnt understand what @kohenkatz mean, i do not main english sorry

[gtempesta]

If for some reason you need to remove cache busting only for fonts, you can find my solution here: https://github.com/JeffreyWay/laravel-mix/issues/2036