Laravel-mix: Font URLs are not respecting the public path when compiling Sass

[sebdesign]

• Laravel Mix Version: 0.8.7
• Node Version (node -v): 7.6.0
• NPM Version (npm -v): 4.3.0
• OS: macOS Sierra 10.12.3

Description:

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.

Steps To Reproduce:

1. In webpack.mix.js:

mix.setPublicPath('public/assets');
mix.sass('resources/assets/sass/admin/app.scss', 'public/assets/css/admin');

1. In resources/assets/sass/admin/app.scss:

@import '~font-awesome/scss/font-awesome';
````

3. Run `yarn run dev` on the terminal.

The output is:
```bash
  fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713     166 kB           [emitted]
  fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9     166 kB           [emitted]
 fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad      98 kB           [emitted]
fonts/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e    77.2 kB           [emitted]
...

The 4 fonts are indeed located in public/assets/fonts/fontawesome-webfont.*.

But the compiled public/assets/css/admin/app.css file has the following @font-face rule:

@font-face {
  font-family: 'FontAwesome';
  src: url(/fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713);
  src: url(/fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713) format("embedded-opentype"),
       url(/fonts/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e) format("woff2"),
       url(/fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad) format("woff"),
       url(/fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9) format("truetype"),
       url(/fonts/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde) format("svg");
  font-weight: normal;
  font-style: normal;
}

In Chrome developer tools the following 404 errors are raised:

GET http://project.dev/fonts/fontawesome-webfont.woff2af7ae505a9eed503f8b8e6982036873e
GET http://project.dev/fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad 
GET http://project.dev/fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9 

[jastend]

Hi @sebdesign,

I'm not using SASS right now but had a similar issue with font-awesome. I fixed it by copying the files manually into the public folder.

E.g.:

mix.copy('node_modules/font-awesome/fonts', 'public/fonts');

This way they won't get versioned and mapped, which seems to be the root cause for this problem.

[KristofMorva]

@jastend that's not really a solution, fonts and images should be copied with Webpack optimally.
@sebdesign you need to use setResourceRoot to define the prefix for CSS font and image references (/assets/ in your case).

[MicroDreamIT]

How am I suppose to implement setResourceRoot?

[robbyrice]

mix.setResourceRoot('root-path'); //where root-path is whatever you want the prefix for you're assets to be.

[e-abdelbasset]

@KristofMorva is right "mix.copy()" is not a solution
if you want to put the 'app.css' file in the 'public/assets/css/admin' folder then this probably will solve your problem :

resources/assets/sass/admin/app.scss :
@import '~font-awesome/scss/font-awesome';

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

[samundra]

I am blogged about this issue http://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574 in my page to integrate font-awesome with laravel

[attilaantal]

I've been struggling with this for a while. My app is in a subfolder and the webfonts were copied to the public folder, but the css styles were looking for it in the root:

http://someaddress.com/fonts/somefont.woff2

In case your application resides in a sub-folder, or a sub-sub-folder like http://someaddress.com/yourapp or http://someaddress.com/subfolder/yourapp

Define the setResourceRoot path in the webpack.mix.js file:

mix.setResourceRoot('/yourapp/'); or mix.setResourceRoot('/subfolder/yourapp/');

Results to http://someaddress.com/yourapp/fonts/somefont.woff2 or http://someaddress.com/subfolder/yourapp/fonts/somefont.woff2