Undefined variable error when using sass @use (@import is OK)

[Mr-Nobody-li]

Describe the bug

I got an error when i use sass @use

[plugin:vite:css] [sass] Undefined variable.
  ╷
3 │   background-color: $blue-font-color;
  │                     ^^^^^^^^^^^^^^^^
  ╵
  src\App.vue 3:21  root stylesheet
D:/document/vue/ANALYSIS/vite-demo/src/App.vue:19:21

demo is here codesandbox

In addition to using sass variables, normal styles can be used when i use @use
And sass variables is useful when I use @import .

// index.scss
@import "./var.scss";

Reproduction

https://codesandbox.io/p/github/Mr-Nobody-li/vite-demo/master?file=%2Findex.html&selection=%5B%7B%22endColumn%22%3A25%2C%22endLineNumber%22%3A10%2C%22startColumn%22%3A25%2C%22startLineNumber%22%3A10%7D%5D&workspace=%257B%2522activeFileId%2522%253A%2522clck6o50l00077neo8h494lgz%2522%252C%2522openFiles%2522%253A%255B%2522%252FREADME.md%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clck6o7x3000x356hlodlc529%2522%253A%257B%2522key%2522%253A%2522clck6o7x3000x356hlodlc529%2522%252C%2522name%2522%253A%2522Default%2522%252C%2522devtools%2522%253A%255B%257B%2522key%2522%253A%2522clck6o7x3000y356hubve304k%2522%252C%2522type%2522%253A%2522PROJECT_SETUP%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522key%2522%253A%2522clck6o9vj007w356h22e477d3%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522key%2522%253A%2522clck6o86b003g356hrif80mi8%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D%257D%252C%2522currentSpace%2522%253A%2522clck6o7x3000x356hlodlc529%2522%252C%2522spacesOrder%2522%253A%255B%2522clck6o7x3000x356hlodlc529%2522%255D%257D

Steps to reproduce

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i5-10505 CPU @ 3.20GHz
    Memory: 4.01 GB / 15.72 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vitejs/plugin-vue: ^4.0.0 => 4.0.0
    vite: ^4.0.0 => 4.0.4

Used Package Manager

pnpm

Logs

[plugin:vite:css] [sass] Undefined variable.
  ╷
3 │   background-color: $blue-font-color;
  │                     ^^^^^^^^^^^^^^^^
  ╵
  src\App.vue 3:21  root stylesheet
D:/document/vue/ANALYSIS/vite-demo/src/App.vue:19:21

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.

[sapphi-red]

This is not a bug in Vite.

You need to use @forward instead of @use to re-export variables.
src/styles/index.scss

-@use "./var.scss";
+@forward "./var.scss";

[Mr-Nobody-li]

This is not a bug in Vite.

You need to use @forward instead of @use to re-export variables. src/styles/index.scss

-@use "./var.scss";
+@forward "./var.scss";

that works. thanks!