Conditional imports don't work in scss

Describe the bug

When using a conditional import in scss, the output isn’t processed correctly. SCSS variables are still in the output:

Related to https://github.com/withastro/astro/issues/2883

Reproduction

https://stackblitz.com/edit/vitejs-vite-qvvgg9

System Info

System:
    OS: Linux 5.19 undefined
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 6.23 GB / 15.42 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.7.0 - /usr/bin/node
    npm: 8.17.0 - /usr/bin/npm
  Browsers:
    Firefox: 103.0.2

Used Package Manager

pnpm

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 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.

[tony19]

@obj-obj I think you meant to use @media (prefers-color-scheme: dark) rule, right? That seems to work.

[obj-obj]

If you are saying about this, I think it should work.

@media (max-width: 768px) {
  @import './foo';
}

That doesn’t work. Time to make another issue then