3

I try to compile Font Awesome SCSS files in Laravel application. Font Awesome installed with NPM. Compiled CSS stored in 'public/css/' folder. Also 'public/fonts/' folder created. But URLs in compiled CSS file leads to '/fonts/' so it will look for fonts in 'public/css/fonts'. Which is not the case.

Questions.

1. I try to figure out why Laravel create 'public/fonts' folder but generate '/fonts/' URL in CSS file instead of '../fonts/'?

2. I know there's an option called 'processCssUrls: false' that fix this issue. In documentation they say that rewriting URLs is a useful feature, but how its useful if it generate wrong URLs?

3. And I wonder should it work like that? Is there any explanation to this issue?

It's strange, that default Laravel feature not work properly. On Picture 1 You can see folder structure, after compilation and generated CSS file with wrong URLs. On Picture 2 You can see solutions to this issue. But, it will work until recompilation. Code snippets of SCSS and webpack.mix.js files added.

Picture 1 - Folder 'fonts' and wrong CSS URLs created after compilation

Picture 1

Picture 2 - Everything working after manually changing paths

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
});
BlackB0ne
  • 135
  • 1
  • 10

1 Answers1

6

Ran into the same problem and found the fix in a closed issue on the repo. https://github.com/JeffreyWay/laravel-mix/issues/1136

Set the resource root in the webpack.mix.js using the following: mix.setResourceRoot('../');

cjwd
  • 76
  • 1
  • This solution won't work with subfolders. For example, if I create 'public/css/css/app.css' I need to change setResourceRoot('../') to setResourceRoot('../../'). But now files in public/css/ won't work. – BlackB0ne Jan 17 '19 at 09:00
  • If your directory structure is that complex, may I suggest passing laravel mix options and set processUrls to false and then do a custom webpack configuration using the copy webpack plugin to copy the compile files to destination path you want. An example can be seen here: https://github.com/justintadlock/mythic/blob/master/webpack.mix.js – cjwd Jan 25 '19 at 17:04