hot-proxy does not handle `$app-css-relative-asset-path` properly

Question

When I use the bin/watch-storefront.sh my custom font does not load properly.

My fonts are defined like the default font in a own file like

/* /MyTheme/src/Ressources/app/storefront/src/scss/vendor/_outfit-fontface.scss */
...
@font-face {
    font-family: 'Outfit';
    src: url('#{$app-css-relative-asset-path}/font/Outfit/Outfit-SemiBold.woff2') format('woff2'),
    url('#{$app-css-relative-asset-path}/font/Outfit/Outfit-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
...

When I run bin/console theme:compile && bin/console assets:install The fonts get loaded just fine on the regular website. The URL of the font files is like https://my-site.de/theme/f9cf8c2bbd24d1ca2941b5120cde3278/assets/font/Outfit/Outfit-Regular.woff2

But when I run the hot-proxy via bin/watch-storefront the compiled CSS font path is like http://my-site.de:9998/bundles/storefront/assets/font/Outfit/Outfit-Bold.woff2 I looked into the directories and my fonts are not located in storefront/assets but in mythemeplugin/assets

The wrong path seems to be exported to /var/theme-entry.scss where it already sets the $app-css-relative-asset-path to

$app-css-relative-asset-path: '/bundles/storefront/assets'; $sw-asset-public-url: '';

I tried to replace the variable $app-css-relative-asset-path with a hard-coded ../assets/ in my *-fontface.scss but this will cause a compile error in the hot-proxy.

What can I do to make the fonts load properly in the hot-proxy and the normal site?

Answer 1

See this issue on GitHub with a possible workaround.

Adding to the description, you'll have to change the type of your style property in theme.json to an object:

{
  // ..
  "style": {
    "app/storefront/src/scss/overrides.scss": [],
    "@Storefront": [],
    "app/storefront/src/scss/base.scss": {
      "resolve": {
        "my-theme-env": "app/storefront/env/default"
      }
    }
  },
  // ...
}