Sage 11 Build - Some assets return 404 but not in dev

Hey so I have migrated a project from Sage 9 โ†’ Sage 11.

All looks good when running dev but when we run build, some assets return a 404.

Particually fonts and some images that are called in the .scss files.

Only some return a 404 others do not.

I have check the build folder and requested asset seems to be there.

fonts.scss example:

@font-face {
  font-display: auto;
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 400;
  src: url('@fonts/AvenirLTProBook.woff2') format('woff2');
}

@font-face {
  font-display: auto;
  font-family: 'Avenir';
  font-style: italic;
  font-weight: 400;
  src: url('@fonts/AvenirLTProOblique.woff2') format('woff2');
}

@font-face {
  font-display: auto;
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 500;
  src: url('@fonts/AvenirLTProMedium.woff2') format('woff2');
}

@font-face {
  font-display: auto;
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 600;
  src: url('@fonts/AvenirLTProHeavy.woff2') format('woff2');
}

@font-face {
  font-display: auto;
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 700;
  src: url('@fonts/AvenirLTProBlack.woff2') format('woff2');
}

@font-face {
  font-display: auto;
  font-family: 'Avenir';
  font-style: italic;
  font-weight: 700;
  src: url('@fonts/AvenirLTProBlackOblique.woff2') format('woff2');
}

Any advice?

This is because your base public path is incorrect

Update sage/vite.config.js at 9ecea457051a8f25bec5750aa8b54273d0d17a56 ยท roots/sage ยท GitHub based on your setup

1 Like