Vue3+Vite项目使用Sass时出现Undefined variable错误求助

检查基础导入逻辑 #

首先确认style.scss是否正确导入了_colors.scss：
假设你的文件结构是src/styles/_colors.scss和src/styles/style.scss，在style.scss中添加导入语句：

// 方法1：使用传统@import语法
@import './_colors.scss';

// 方法2：使用Sass模块语法（推荐）
@use './_colors' as *;

之后在App.vue中确保正确导入style.scss：

<style lang="scss" scoped>
@import '@/styles/style.scss';
/* 或者直接在style标签外导入（全局生效）：
<style lang="scss">
@import '@/styles/style.scss';
</style>
*/
</style>

全局注入变量（无需每次导入） #

如果希望在所有Vue组件的SCSS中直接使用_colors.scss的变量，无需手动导入，可以配置Vite的预处理器选项：
在vite.config.ts中修改配置：

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: {
        // 全局注入_colors.scss，所有SCSS代码均可直接使用变量
        additionalData: `@use '@/styles/_colors.scss' as *;`
        // 若使用传统@import语法，替换为：
        // additionalData: `@import '@/styles/_colors.scss';`
      }
    }
  }
})

额外注意事项 #

• Vite自带Sass支持，无需单独安装sass-loader（你已安装也不影响，但可考虑卸载以避免版本冲突）
• 确保文件路径正确，使用@别名时需在Vite配置中提前配置resolve.alias
• 若使用Sass模块语法（@use），注意变量的命名空间问题，使用as *可直接访问变量名

内容的提问来源于stack exchange，提问作者Mohamed Farouk Ayadi