Can not use “@” to import a scss file when the file include a mixin method

[Yechuanjie]

Describe the bug

// helloWorld.vue
<script setup lang="ts">
import { ref } from 'vue';

defineProps<{ msg: string }>();

const count = ref(0);
</script>

<template>
  <div class="test"></div>
</template>

<style lang="scss" scoped>
@import '@/assets/mixin.scss';
.test {
  width: 100px;
  height: 100px;
  @include bg('http://cdn.leoh.io/images/base_zero/image_29.jpg');
}
</style>

// @/assets/mixin.scss
@mixin bg($url) {
  background: url($url) center no-repeat;
  background-size: 100% 100%;
}

// vite error
  Error: expected ")".
    ╷
  3 │   background: url(../assets/$url) center no-repeat;
    │                   ^
    ╵
    src/assets/mixin.scss 3:19         @import
    src/components/HelloWorld.vue 2:9  root stylesheet

Yes In the style of Vue file, an SCSS file is introduced. If the file does not contain @ mixin method, you can use @/assets/style/mixin.scss The introduction of SCSS; If the @ mixin method is included in the modified file and "@" is used, the above error will be received.

But when I using ../assets/mixin.scss, it is normal

Reproduction

https://stackblitz.com/edit/vitejs-vite-nhc6le?file=src%2Fcomponents%2FHelloWorld.vue

System Info

System:
    OS: Windows 11
  Binaries:
    Node: 14.18.0 
    Yarn: 1.22.4 
    npm: 6.14.15 
  Browsers:
    Chrome: 95.0.4638.69
  npmPackages:
    @vitejs/plugin-vue: ^2.0.0
    vite: ^2.7.2

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/vue-next 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]

Closing as it is organized into #7651.