The scss function cannot be used in the externally imported ‘.scss’ file

[yubo9807]

Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

外部引入 .scss 文件中无法使用 scss 函数，单文件中直接使用是可以的

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      '~': resolve(__dirname, './')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use '@/styles/utils.scss';`,
      },
    },
  },
})

app.vue

<template>
  <div class="wrap">hello</div>
</template>

<!-- 外部引入报错 -->
<style lang="scss" scoped>
@use './app.scss';
</style>

<!-- 直接使用是可以的 -->
<style lang="scss" scoped>
@include utils.mediaSmall{
  .wrap{
    color: blue;
  }
}
</style>

app.scss

@include utils.mediaSmall{
  .wrap{
    color: blue;
  }
}

Reproduction

https://github.com/yubo9807/vue-scss-test

Steps to reproduce

No response

System Info

macOS Sequoia 15.5
Chrome 139.0.7258.128
nodeJS 20.17.0

Used Package Manager

npm

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.

[yubo9807]