Relative URL import in imported scss file is not rebased

[C-Higgins]

Describe the bug

In my app:
@import 'package/src/scss/main.scss';

In package/src/scss/main.scss:
@import 'fonts.scss';

In package/src/scss/fonts.scss:

@font-face {
  font-family: "myfont";
  src: url('../fonts/font.ttf');
}

The font file is in node_modules/package/src/fonts/font.ttf, so within the package, this import is correct.
However, Vite then tries to fetch the font file at localhost:5173/fonts/font.ttf and gets a 404.

Reproduction

https://stackblitz.com/edit/vitejs-vite-25cpaq?file=nm/src/scss/fonts.scss

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 805.00 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.asdf/installs/nodejs/16.16.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/16.16.0/bin/yarn
    npm: 8.11.0 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Firefox: 111.0
    Safari: 16.3
  npmPackages:
    @vitejs/plugin-react-swc: ^3.2.0 => 3.2.0 
    vite: ^4.2.0 => 4.2.0

Used Package Manager

yarn

Logs

Notice in console of repro link:

downloadable font: download failed (font-family: "myfont" ... source: https://vitejsvite25cpaq-orzw--5173.local-corp.webcontainer.io/fonts/font.ttf 

The URL should not be /fonts/font.ttf

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-25cpaq (Open reproduction)

[sapphi-red]

Duplicate of #11012