Relative path(s) not correct

sage
1

Hi there,

I am running into this issue again and again but am confident that I am doing everything by the book…

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot');
  src:
    local('Open Sans Regular'),
    local('OpenSans-Regular'),
    url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'),
    url('../fonts/open-sans-v15-latin-regular.woff') format('woff'),
    url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'),
    url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg');
}

After building this returns a 404 for the fonts like this:

http://example.com/app/themes/example/dist/styles/app/themes/example/dist/fonts/open-sans-v15-latin-regular.woff2

Obviously there is something wrong with how the relative URL is being resolved but why / where is this happening and how can I fix that?

The other directives for images (like url('../images/icons/slider-arrow-white.svg');) also fail…

Thanks for your insights!

2
  1. (IMHO) These days only WOFF and optionally WOFF2 formats are needed.
  2. Have you set publicPath in resources/assets/config.json to proper path, is the correct theme folder name used?
  3. There are webpack loaders that may help with loading fonts.
3

Thanks for getting back!!

  1. Probably went over the top here :slight_smile:
  2. "publicPath": "app/themes/example" --> That was set with the theme installer so it should be OK… (The Sage default in the repo reads "publicPath": "/app/themes/sage")
  3. Since it also affects the image loading I need to address it
4

Your publicPath is not OK, you need the / at the beginning

5

Thanks Ben for taking the time to guide me even when the mistakes I make are so darn obvious… :no_mouth: