在 SCSS 中，变量不能直接用于给 CSS 自定义属性赋值，必须通过 #{$var} 进行一次插值处理。原因也很明确：两者生效的阶段完全不同，SCSS 变量属于编译阶段，CSS 变量属于浏览器运行阶段。如果直接写 $color 而不做插值，最终通常会被原样输出为无效内容 --color: $color，浏览器遇到这种属性值会直接忽略。正确写法应当是 --color: #{$color}。

SCSS变量在CSS里直接写$color为什么不会生效

这并不是“导入失败”，而是典型的语法阶段不匹配：Sass变量（$color）只在编译期存在，而--color: $color这种写法会让Sass把$color当成普通字符串处理，最终生成无效的CSS属性值，因此浏览器会直接忽略整条声明。这也是很多人搜索“为什么CSS中Sass导入的变量无法使用”时最常遇到的根本原因。

必须使用插值语法#{$color}，才能把Sass变量输出成真正可用的实际值：

:root {
--primary: #{$primary-color};
--text-light: #{lighten($primary-color, 20%)};
}

• --primary: $primary-color → 编译后仍然是--primary: $primary-color，属于无效CSS
• --primary: #{$primary-color} → 编译后会变成--primary: #3b82f6，浏览器可以正常识别和使用
• #{}只能用于属性值位置，不能直接用在选择器、@media条件或@keyframes名称中

@use导入后$var报undefined，不是路径错误而是作用域没有正确处理

@use默认会创建命名空间，如果不加as *，就不能直接通过裸变量名访问。比如写了@use "@/styles/variables"之后，正确用法应该是variables.$primary-color，而不是直接写$primary-color。很多SCSS变量无法使用的问题，其实都出在这里，而不是导入路径本身。

• 正确写法：@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两个预处理配置入口，绝大多数“配置了但没效果”的情况，都是因为把.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则是浏览器运行时可读取的CSS自定义属性
• 如果想共享设计令牌，应该把变量抽离到独立文件中（如_tokens.scss），再分别提供给Sass和Tailwind使用
• !default只对Sass变量有效，对--color完全不起作用；CSS变量的兜底写法应使用var(--color, #000)
• 最容易被忽略的坑是：node_modules中的UI库（例如Element Plus）可能提前声明了同名$color，从而导致你的!default没有生效