根本原因是additionaldata注入内容不改变sass模块作用域判断：用@use需显式命名空间（如as v）并调用v.$var，而@import才支持裸变量；且lang="scss"缺失、hmr缓存、路径别名未配置或ide删分号等均会导致变量未解析。
SCSS变量在Vue组件里失效，大概率不是变量写错了，而是additionalData没配对作用域或没处理好@use的模块隔离。
为什么additionalData注入后变量仍报“undefined”
根本原因在于：Vite把additionalData内容当作纯字符串插入每个.scss文件顶部，但它不改变Sass编译器对模块作用域的判断。如果你用@use引入变量文件，而没处理命名空间，变量就不可直接访问。
- 错误配置：
additionalData: `@use "@/styles/variables.scss" as *;`—— 看似加了as *，但若variables.scss内部用了@use（比如又@use "sass:math"），它自身就已是模块化上下文，as *无法穿透嵌套模块 - 更隐蔽的问题：某些IDE或编辑器保存时自动格式化，把
@use末尾分号删掉，导致注入代码语法错误，但Sass编译器只静默跳过，不报错 - 开发服务器热更新时，部分
.vue里的<style lang="scss"></style>块可能被缓存，未重新触发additionalData注入，重启才能生效
additionalData该用@import还是@use
短期见效选@import，长期维护必须迁移到@use——但得改写方式。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章