在Vite中使用Sass @use时出现Undefined variable错误（@import正常）

核心原因 #

@use是Sass的模块化导入语法，和@import的全局注入逻辑完全不同：

• @import会将导入文件的所有内容直接合并到当前作用域，变量可直接访问
• @use默认会为导入的模块创建独立命名空间，变量必须通过命名空间访问；同时模块内容不会自动全局共享，未显式导入的文件无法访问其变量

具体解决方案 #

1. 正确使用@use的命名空间 #

如果仅在单个文件中导入变量，需通过命名空间调用变量：

// 导入时指定命名空间
@use './styles/variables' as vars

body
  background-color: vars.$bg-color

也可使用as *取消命名空间（不推荐，易引发变量冲突）：

@use './styles/variables' as *

body
  background-color: $bg-color

2. 配置Vite全局自动导入变量 #

若需要在所有Sass文件中直接使用变量，无需每次手动导入，可在vite.config.js中配置全局预导入：

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      sass: {
        // 注意路径需匹配你的项目变量文件位置
        additionalData: `@use "./src/styles/variables" as *`
      }
    }
  }
})

配置后，Vite会自动在每个Sass文件开头注入这段导入代码，所有文件均可直接访问变量。

3. 用@forward导出模块化变量 #

如果是开发组件库或多模块项目，可通过@forward将变量导出到入口模块，再统一导入：

// styles/index.sass
@forward './variables'

其他文件只需导入入口模块即可访问变量：

@use './styles' as styles

body
  background-color: styles.$bg-color

内容的提问来源于stack exchange，提问作者MrNobody