Vue3+Vite项目配置Sass后组件无法识别全局变量该如何解决？

错误原因 #

• 配置代码存在语法错误：你写的additionalData配置里使用了HTML转义字符"代替实际引号，同时路径前后多了冗余空格，会导致路径解析失败无法找到变量文件。
• 别名未配置：Vue CLI默认内置了@指向src目录的别名，但Vite需要手动配置别名才能识别@路径，直接使用未定义的别名会导致路径解析失败。
• 直接在main.js引入变量文件的逻辑错误：Sass变量是编译时资源，仅在Sass预编译阶段生效，在main.js引入只会把变量文件里的普通CSS规则全局生效，变量在编译完成后就会被替换消失，不会提供给其他组件的Sass代码使用。
• 配置修改后未重启服务：Vite的配置项修改不会热更新生效，修改完成后必须重启开发服务才会加载新配置。

正确配置步骤 #

1. 首先在vite.config.js中配置@别名，同时修正Sass全局变量配置：

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

export default defineConfig({
  plugins: [vue()],
  // 配置@别名指向src目录
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 注意使用正常引号，路径无多余空格
        additionalData: `@import '@/css/_variables.scss';`
      }
    }
  }
})

2. 配置完成后重启Vite开发服务即可生效。

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