Describe the bug

I need to import files with explicit import and use their url in react useEffect. I use it to dynamically bind themes CSS according to switch.

Unfortunately, CSS imports with suffix ?url do not have resolved its dependencies, so if they contains fonts defined by url(somePath) then suchfonts from somePath are not included in assets in dist.

There is not fully reproducing code in stackblitz because I can't upload fonts... but there is an example code.

Reproduction

https://stackblitz.com/edit/bad-imports-css-url

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) arm64 Apple M1
    Memory: 252.84 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
    Watchman: 2022.03.07.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 100.0.4896.127
    Edge: 100.0.1185.44
    Safari: 15.4
  npmPackages:
    @vitejs/plugin-legacy: ^1.7.1 => 1.8.0 
    @vitejs/plugin-react-refresh: ^1.3.6 => 1.3.6 
    vite: ^2.8.6 => 2.9.1

Used Package Manager

yarn

Logs

No response

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 https://github.com/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.