Snackpack's avatar

Font URLs are not respecting the public path when compiling Sass

I use an public/assets folder for all my assets, but when I'm compiling my Sass files, the @font-face URLs are not reflecting my configured folder structure.

My webpack.mix.js:

mix.setResourceRoot('public/assets'); mix.js('resources/js/app.js', 'public/assets/js') .sass('resources/sass/app.scss', 'public/assets/css');

if (mix.inProduction()) { mix.version(); }

My app.scss:

@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss"; @import "~@fortawesome/fontawesome-free/scss/solid.scss"; @import "~@fortawesome/fontawesome-free/scss/brands.scss";

When I execute npm run dev the command, the output is:

fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?0fabb6606be4c45acfeedd115d0caca4 fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.svg?ccfdb9dc442be0c629d331e94497428b fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?085b1dd8427dbeff10bd55410915a3f6 fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?cac68c831145804808381a7032fdc7c2 fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff?dc0bd022735ed218df547742a1b2f172 fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?89bd2e38475e441a5cd70f663f921d61 fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?03ba7cb710104df27f1c9c46d64bee4e fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?781e85bb50c8e8301c30de56b31b1f04 fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?c500da19d776384ba69573ae6fe274e7 fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?ee09ad7553b8ad3d81150d609d5341a0

But that is wrong and does not work either. Can somebody help me?

0 likes
4 replies
Snackpack's avatar

Nobody who can help me? I can not imagine that.

Please or to participate in this conversation.