升级至Vite 4.3.0后出现Undefined variable错误求助

排查与修复步骤 #

1. 修正Vite预处理器配置路径 #

Vite 4.3.x对Sass路径解析逻辑做了调整，全局导入必须确保路径绝对且正确。修改vite.config.js：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 用绝对路径引入设计系统tokens，避免相对路径解析偏差
        additionalData: `@use "${path.resolve(__dirname, './node_modules/你的设计系统包名/src/_tokens.scss')}" as *;`,
      },
    },
  },
});

如果使用@use语法，必须通过as *消除命名空间，否则变量需要带上命名空间前缀（比如tokens.$primary-color）。

2. 调整Sass版本适配 #

Vite 4.3.x与部分Sass版本存在兼容性问题，尝试切换Sass版本：

# 降级到稳定兼容版本
npm install sass@1.60.0
# 或升级至最新稳定版
npm install sass@latest

3. 统一Sass导入语法 #

@import和@use混用会导致作用域隔离问题，彻底替换所有@import为@use，包括_mixins.scss内部：

// _mixins.scss 顶部统一导入依赖
@use './_variables.scss' as *;
@use '../design-system/_tokens.scss' as *;

// 确保混入内的函数/变量引用符合@use规则
@mixin button-style {
  background-color: $primary-color;
  padding: $spacing-md;
}

4. 检查设计系统导出逻辑 #

如果设计系统用@forward导出变量，确认项目中导入的路径能正确解析转发的文件。比如设计系统_tokens.scss内：

@forward './colors';
@forward './spacing';

则项目导入时需确保路径指向_tokens.scss，而非单个子文件。

5. 清除缓存重启服务 #

Vite升级后的缓存残留可能导致配置不生效：

• 删除项目根目录下的node_modules/.vite文件夹
• 停止并重新启动Vite开发服务
• 清除浏览器缓存后刷新页面

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