Laravel-mix: Relative path to fonts in sass, {{ mix() }} and Unable to locate Mix file: /fonts/my-beautiful-font.woff2

[utrumo]

1. Check your package.json file, and ensure that there are no old Laravel Elixir dependencies that might be interfering with Mix.
   -->

• Laravel Mix Version: 4.0.14 (npm list --depth=0)
• Node Version: 11.6.0 (node -v):
• NPM Version: 6.5.0-next.0 (npm -v):
• OS: https://github.com/nodejs/docker-node/blob/f9b80051e434ecfc9e8ae992b93716272aaf3961/11/stretch/Dockerfile

Description:

Hi! I have problem with relative path to fonts in sass files and preloading fonts.
If i use asset() for font preloading in head of page, i get a double downloading of fonts: first without version hash and second with it and error in browser console:
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriateasvalue and it is preloaded intentionally.
If i try to use mix() for it, i get an laravel error:

Unable to locate Mix file: /fonts/my-beautiful-font.woff2

Steps To Reproduce:

use relative paths for fonts in saas files:

@font-face {
  font-family: "My beautiful font";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("My beautiful font"),
    url("fonts/my-beautiful-font.woff2") format("woff2"),
    url("fonts/my-beautiful-font.woff") format("woff");
}

and
<link rel="preload" href="{{ mix('fonts/my-beautiful-font.woff2') }}" as="font" type="font/woff2" crossorigin>
instead of
<link rel="preload" href="{{ asset('fonts/my-beautiful-font.woff2') }}" as="font" type="font/woff2" crossorigin>
in page head

[JSn1nj4]

@dementor5 I'm having basically the same issue. In my case, it's my public/js/home.js file that's not being loaded (I assume because it's the first mix() call found on my home page).

This is what I have in my webpack.mix.js:

mix.webpackConfig({
  output: {
    publicPath: '/',
    chunkFilename: 'js/modules/[name].js'
  }
}).js('resources/assets/js/app.js', 'public/js')
  .js('resources/assets/js/home.js', 'public/js')
  ... // other chained method calls
  .version();

This is how the files used to output in my public/ folder using laravel-mix 3.0.0:

public/
  js/
    modules/
      0.js
      1.js
      ...
    app.js
    home.js

This is how they're outputting now using laravel-mix 4.0.14:

public/
  js/
    modules/
      js/
        app.js
        home.js
      0.js
      1.js
      ...

It seems like the files are just being compiled into a different location. In my case, I guess it's not that big a deal... But it would definitely be ideal for me to keep the modules that are lazy-loaded in a modules/ folder instead of directly in public/.

I am wondering if this has more to do with a change in Webpack though...

[JSn1nj4]

@dementor5 it looks like this was already being discussed in #1889 (specifically, this comment). I'm confirming that as long as I don't use the .extract() method, the modules end up in the location I expect them to be in.

I'll continue discussion there.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[codeflorist]

I'm trying to acomplish the same thing: Being able to add preload-meta-tags for fonts processed with mix's CSS-url()-rewriting.

Mix's CSS url() rewriting appends versions to fonts, BUT unfortunately does not add entries for them to mix-manifest.json. This means, we cannot use e.g. mix('/fonts/my-font.woff2') to get the versioned URL to use in a preload-link-tag.

tl;dr: It would be great, if Mix could populate mix-manifest.json with assets processed via url() rewriting.

[bhyordi]

I'm trying to acomplish the same thing: Being able to add preload-meta-tags for fonts processed with mix's CSS-url()-rewriting.

Mix's CSS url() rewriting appends versions to fonts, BUT unfortunately does not add entries for them to mix-manifest.json. This means, we cannot use e.g. mix('/fonts/my-font.woff2') to get the versioned URL to use in a preload-link-tag.

tl;dr: It would be great, if Mix could populate mix-manifest.json with assets processed via url() rewriting.

anyone found a solution for this by now?

[guestpectacular]

You can use this approach by @gtempesta, as your fonts will be the same always you can skip cache-busting-part and still use:

<link rel="preload" href="{{ asset('fonts/my-beautiful-font.woff2') }}" as="font" type="font/woff2" crossorigin>