How to specify font location in CSS with Vite static assets

On a non Laravel site I have this in my CSS file, which references font files in the same directory:

@font-face {
    font-family: 'Konnect';
    src: url('Konnect-Regular.woff2') format('woff2'),
    url('Konnect-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

I've got Vite working Laravel 9.41, and I was also able to get the browser to use the font by configuring static assets, and then calling the built version using Vite::asset like this:

<link rel="preload" href="{{ Vite::asset('resources/fonts/Konnect-Regular.woff2') }}" as="font" type="font/woff2" crossorigin="">

but I can't use that Blade command in my SCSS file, so how am I supposed to tell the CSS where to find the font?

Hope this makes sense.

(NB: I am using a SASS watcher in PhpStorm, if that's relevant.)