Having some trouble compiling Font Awesome SCSS files in my Laravel application. I installed Font Awesome using NPM, and the compiled CSS is stored in the 'public/css/' folder while a 'public/fonts/' folder was also created. However, the URLs in the compiled CSS file are leading to '/fonts/', causing it to look for fonts in 'public/css/fonts', which is incorrect.
Questions:
1. Why does Laravel create a 'public/fonts' folder but generate '/fonts/' URLs in the CSS file instead of '../fonts/'?
2. I know there's an option called 'processCssUrls: false' that can fix this issue. In the documentation they mention that URL rewriting is a useful feature, but how is it useful if it generates incorrect URLs?
3. Is this the intended behavior? Can someone explain this issue?
It's puzzling that this default Laravel feature isn't working properly. In Picture 1, you can see the folder structure after compilation and the CSS file with incorrect URLs. In Picture 2, you can see the solutions to this issue, but they only work until recompilation. I've included code snippets of the SCSS and webpack.mix.js files below.
Picture 1 - Folder 'fonts' and incorrect CSS URLs generated after compilation
Link to Picture 1
Picture 2 - Everything works after manually changing paths
Link to Picture 2
1. SCSS file:
// Variables
@import 'variables';
// FontAwsome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
2. webpack.mix.js file:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/fawesome.scss', 'public/css')
// Work with this
.options({
processCssUrls: false
});