Referencing assets (fonts, images) in SCSS/CSS files? about sage

[nathobson]

I've now managed to get this working. The issue is around Vite not supporting the dev server having a different URL, see: vitejs/vite#2196.

I've added base: './', near the top of the config just after publicDir to process the URLs during build (relative to the theme) and then I've modified the dev server config to include origin: devServerConfig.HMR_ENTRYPOINT, as follows:

  if (dev) {
    config.server = {
      host: '0.0.0.0',
      origin: devServerConfig.HMR_ENTRYPOINT,
      strictPort: true,
      fs: {
        strict: true,
        allow: ['node_modules', assets.base]
      }
    }

This adds the correct URLs during dev.

[ravorona]

Sorry for the late response and thank you for the tip @nathobson. I will check and give that a try as soon as possible

[nathobson]

OK, so after a small break and coming back to this, it appears that setting base: './' within vite.config.ts and referencing using aliases @/fonts/font-name.woff2 works for build but in dev it's missing the port in the URL. The CSS file is trying to reference site.test/fonts/font-name.woff2 rather than site.test:3000/fonts/font-name.woff2.