uniapp [plugin:vite:css] [sass] undefined variable问题如何解决？

在uniapp项目中运行时报错"[plugin:vite:css] [sass] undefined variable"，提示找不到Sass变量。这个错误通常出现在使用Vite构建工具时，Sass变量未被正确定义或导入。请问如何解决这个Sass变量未定义的问题？需要检查哪些配置文件或修改什么配置？

2 回复

在Sass文件中检查变量定义。确保：

  1. 变量已正确定义
  2. 文件路径正确
  3. 使用@use或@import引入变量文件
  4. 检查变量名拼写

在UniApp中使用Sass时遇到undefined variable错误，通常是因为变量未定义或作用域问题。以下是常见解决方案：

1. 检查变量定义 确保变量在使用前已正确定义：

// 正确示例
$primary-color: #007AFF;
.text {
  color: $primary-color;
}

2. 检查文件引入 若变量定义在其他文件，需通过@import或@use引入：

// variables.scss
$primary-color: #007AFF;

// 在需要使用变量的文件中
@import '@/styles/variables.scss'; // 传统方式
// 或使用现代方式
@use '@/styles/variables' as vars;
.text {
  color: vars.$primary-color;
}

3. 配置Vite 在vite.config.js中预加载全局Sass文件：

export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
}

4. 检查文件路径

  • 使用@/别名时确保在vite.config.js中正确配置
  • 检查文件扩展名（.scss/.sass）

5. 检查语法

  • Sass变量以$开头
  • 避免拼写错误
  • 注意分号和括号匹配

6. 重启开发服务器 修改配置后，重启服务：npm run dev

若问题持续，检查控制台错误信息定位具体文件和行号，确认变量定义位置是否正确引入。

回到顶部