请问这种如何解决呢？在vite.config里面配置了scss的全局导入，在一个模板或者页面的style里面使用@use导入这个模板或者页面的样式，其中样式使用了全局变量

[zc-tired]

如题，跑起来之后会报错，如果该页面不使用@use而是直接把样式写到style里面就没有这个问题。使用@import会在控制台打印一大堆的警告信息，没有办法解决了，求助啊！！！
这是附件vite-demo.zip

vite.config
preprocessorOptions: {
      // 全局样式引入
      scss: {
        additionalData: '@use "@/styles/var.scss" as *;',
        javascriptEnabled: true
      }
    }

详细请查看附件里面的例子
<style lang="scss" scoped>
@use './page.scss'
</style>

[akiverin]

根据问题描述，问题出在Vite配置的SCSS全局变量未正确注入到通过@use引入的文件中。以下是逐步解决方案：

1. 确保路径别名正确配置

在vite.config.js中，确认@别名指向src目录：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 确保路径正确
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/var.scss" as *;', // 使用别名
      },
    },
  },
})

2. 使用@import替代@use进行全局注入（临时方案）
   虽然会触发警告，但能验证变量是否有效：

// vite.config.js
additionalData: '@import "@/styles/var.scss";'

然后在组件中直接使用变量，无需@use引入。

3. 更新依赖版本
   确保使用最新的Sass和Vite版本，避免兼容性问题：

npm install sass@latest vite@latest

4. 显式导入变量到局部文件
   在page.scss顶部再次导入变量（冗余但确保作用域）：

// page.scss
@use '@/styles/var.scss' as *;

.text {
  color: $primary-color;
}

5. 检查变量定义
   确认var.scss正确定义变量并导出：

// src/styles/var.scss
$primary-color: #535; // 无需导出，因使用as *

6. 避免在组件中使用@use引入SCSS文件
   直接在组件样式中编写或改用@import（尽管有警告）：

<style lang="scss" scoped>
.text {
  color: $primary-color;
}
</style>

最终配置推荐
vite.config.js:

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/var.scss" as *;',
      },
    },
  },
})

组件使用示例：

<style lang="scss" scoped>
/* 直接使用变量，无需@use */
.text {
  color: $primary-color;
}
</style>