Sass loader can't load url with Encore webpack and Symfony 5

Question

I updated Encore webpack and its dependencies. Since, I have this error :

Error: Can't resolve '/fonts/Basier-Circle-medium-webfont/basiercircle-medium-webfont.woff' in 'E:\Projets web\Roadtripr\roadtripr\assets\css' at runMicrotasks ()

The font-files are in the public/fonts directory.

EDIT :

There is the @font-face declaration :

/* Basier */
@font-face {
  font-family: 'Basier';
  src: url('/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.woff') format('woff'),
       url('/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Basier';
  src: url('/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.woff') format('woff'),
       url('/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Basier';
  src: url('/fonts/Basier-Circle-medium-webfont/basiercircle-medium-webfont.woff') format('woff'),
       url('/fonts/Basier-Circle-medium-webfont/basiercircle-medium-webfont.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Basier';
  src: url('/fonts/Basier-Circle-semibold-webfont/basiercircle-semibold-webfont.woff') format('woff'),
       url('/fonts/Basier-Circle-semibold-webfont/basiercircle-semibold-webfont.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Basier';
  src: url('/fonts/Basier-Circle-bold-webfont/basiercircle-bold-webfont.woff') format('woff'),
       url('/fonts/Basier-Circle-bold-webfont/basiercircle-bold-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Basier';
  src: url('/fonts/Basier-Circle-bold-webfont/basiercircle-bold-webfont.woff') format('woff'),
       url('/fonts/Basier-Circle-bold-webfont/basiercircle-bold-webfont.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

Error: Can't resolve '/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.woff2' in 'E:\Projets web\Roadtripr\roadtripr\assets\css' at runMicrotasks () — Christophe Dubois, Mar 03 '21 at 13:07

yivi · Answer 1 · 2021-03-03T12:23:54.480

0

Do not put your your font files in your public directory.

Put them in assets/fonts. Picture something like this:

E:\Projets web\Roadtripr\roadtripr
|- bin/
|- config/
|- assets/
|    |- css/
|    |- fonts/
|- src/
|- public/


When you run `yarn encore` the file fonts referenced by `url()` declarations will be copied to your `public/build` directory automatically.

edited Mar 03 '21 at 12:23

answered Mar 03 '21 at 12:18

yivi

42,438
18
116
138

Thank your very much for your help. I moved the folder "fonts' from 'public' to 'asset'. I ran Encore webpack : the files were copied to public/build. However, I always have the same error. – Christophe Dubois Mar 03 '21 at 13:06
Sorry I made a mistake. Files were not copied to public / build / fonts when starting Encore webpack – Christophe Dubois Mar 03 '21 at 13:25
I modified the Encore webpack configuration file and the files were now correctly copied to the public/build/fonts folder. However, I always have the same error. – Christophe Dubois Mar 04 '21 at 16:34
Yeah, something doesn't add up. I've asked something else below the question, though. – yivi Mar 04 '21 at 16:36
Sorry, I hadn't seen the question. According to me, the console gives me the first error encountered, but it must be the same for all lines. – Christophe Dubois Mar 04 '21 at 16:46
Indeed, if I remove some lines, the error appears on the first : Error: Can't resolve '/fonts/Basier-Circle-semibold-webfont/basiercircle-semibold-webfont.woff' in 'E:\Projets web\Roadtripr\roadtripr\assets\css' at runMicrotasks () – Christophe Dubois Mar 04 '21 at 16:48

score 0 · Answer 2 · answered May 25 '21 at 23:56

0

maybe a little bit late but I faced the same problem and fixed it by moving the fonts files into assets/css folder (same folder as your CSS file) and changed the path inside the CSS file from url ("/fonts/....") to url ("nameoffolder")

answered May 25 '21 at 23:56

ala NABLI

1

score 0 · Answer 3 · answered Oct 11 '21 at 19:51

0

put your font file into :

/assets/fonts/your-font.ttf

then into /assets/scss/your-style.scss:

@font-face{
    font-family : 'your-font';
    src : url('../fonts/your-font.ttf') format('truetype');
}

webpack will do the job

answered Oct 11 '21 at 19:51

Steph TwX

59
2
10

Sass loader can't load url with Encore webpack and Symfony 5

3 Answers3

Linked