scss变量不能直接赋值给css变量，必须用#{$var}插值；因二者分属编译期与运行时，$color不加插值会原样输出为无效字符串--color: $color，浏览器忽略；正确写法是--color: #{$color}。
SCSS变量在CSS里直接写$color根本不会生效
这不是“导入失败”，而是语法错位：Sass变量（$color）只在编译期存在，而--color: $color这种写法会让Sass把$color当纯字符串处理，最终生成无效的CSS属性值，浏览器直接忽略整条声明。
必须用插值语法#{$color}才能把Sass变量转成实际值：
:root {
--primary: #{$primary-color};
--text-light: #{lighten($primary-color, 20%)};
}
-
--primary: $primary-color→ 编译后是--primary: $primary-color，无效 -
--primary: #{$primary-color}→ 编译后是--primary: #3b82f6，可用 -
#{}只能用于属性值位置，不能用在选择器、@media条件或@keyframes名称里
@use导入后$var报undefined，不是路径问题而是作用域没解构
@use默认创建命名空间，不加as *就无法裸名访问变量。比如@use "@/styles/variables"之后，你得写variables.$primary-color，而不是$primary-color。
- 正确写法：
@use "@/styles/_variables.scss" as *;（注意文件名必须以下划线开头） - 别名写法：
@use "@/styles/_variables.scss" as v;→ 后续用v.$primary-color -
@use "variables.scss"会失败，必须写_variables.scss或省略下划线和扩展名 - IDE自动删分号、HMR缓存未刷新、
lang="scss"漏写，都会让@use静默失效
Vite中additionalData配了却没效果，大概率是配错配置项
Vite区分sass和scss两个配置入口，90%的“不生效”是因为把.scss文件的配置写在了css.preprocessorOptions.sass下——它只管.sass（缩进语法）文件。
- 必须配在
css.preprocessorOptions.scss.additionalData - 内容推荐写
@use "@/styles/_variables.scss" as *;，不是@import - 路径别用相对路径（如
../styles/_variables.scss），Vite解析不稳定；统一用@/别名 - 确认
vite.config.js里已配置resolve.alias映射@到src
CSS变量（--xxx）和Sass变量（$xxx）压根不是一回事
它们生命周期不同、作用域隔离、语法互不识别。试图让var(--color)读取$color，或在tailwind.config.js里调用theme('colors.primary')去取Sass变量，都会失败。
-
$color是Sass编译期静态值，编译完就消失；--color是运行时浏览器可读的自定义属性 - 想共享设计令牌，得抽离到独立文件（如
_tokens.scss），再分别被Sass和Tailwind读取 -
!default只对Sass变量生效，对--color完全无效；CSS变量兜底靠var(--color, #000) - 最隐蔽的坑：node_modules里UI库（如Element Plus）可能提前定义同名
$color，导致你的!default被跳过
@use写错了，而是构建链路里多个环节悄悄覆盖了变量——additionalData注入、UI库自带_variables.scss、甚至Vite插件自动加载的样式，都可能比你写的那行早一步绑定变量名。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
