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');

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

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

3. Run yarn run dev on the terminal.

The output is:

  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

[rouben]

@attilaantal thanks for the tip man! Really helped. By the way, you can enhance your setup by using whatever app URL you have defined in .env by adding code like this:

// Try the environment variable (defined in .env), otherwise use root
const ASSET_URL = process.env.ASSET_URL || '/';

// Set resourceRoot accordingly
mix.setResourceRoot(ASSET_URL);