为什么CSS中Sass导入的变量无法使用

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%)};}

1. --primary: $primary-color → 编译后是--primary: $primary-color，无效
2. --primary: #{$primary-color} → 编译后是--primary: #3b82f6，可用
3. #{}只能用于属性值位置，不能用在选择器、@media条件或@keyframes名称里

@use导入后$var报undefined，不是路径问题而是作用域没解构

@use默认创建命名空间，不加as *就无法裸名访问变量。比如@use "@/styles/variables"之后，你得写variables.$primary-color，而不是$primary-color。

1. 正确写法：@use "@/styles/_variables.scss" as *;（注意文件名必须以下划线开头）
2. 别名写法：@use "@/styles/_variables.scss" as v; → 后续用v.$primary-color
3. @use "variables.scss"会失败，必须写_variables.scss或省略下划线和扩展名
4. IDE自动删分号、HMR缓存未刷新、lang="scss"漏写，都会让@use静默失效

Vite中additionalData配了却没效果，大概率是配错配置项

Vite区分sass和scss两个配置入口，90%的“不生效”是因为把.scss文件的配置写在了css.preprocessorOptions.sass下——它只管.sass（缩进语法）文件。

1. 必须配在css.preprocessorOptions.scss.additionalData
2. 内容推荐写@use "@/styles/_variables.scss" as *;，不是@import
3. 路径别用相对路径（如../styles/_variables.scss），Vite解析不稳定；统一用@/别名
4. 确认vite.config.js里已配置resolve.alias映射@到src

CSS变量（--xxx）和Sass变量（$xxx）压根不是一回事

它们生命周期不同、作用域隔离、语法互不识别。试图让var(--color)读取$color，或在tailwind.config.js里调用theme('colors.primary')去取Sass变量，都会失败。

1. $color是Sass编译期静态值，编译完就消失；--color是运行时浏览器可读的自定义属性
2. 想共享设计令牌，得抽离到独立文件（如_tokens.scss），再分别被Sass和Tailwind读取
3. !default只对Sass变量生效，对--color完全无效；CSS变量兜底靠var(--color, #000)
4. 最隐蔽的坑：node_modules里UI库（如Element Plus）可能提前定义同名$color，导致你的!default被跳过

真正卡住人的地方，往往不是@use写错了，而是构建链路里多个环节悄悄覆盖了变量——additionalData注入、UI库自带_variables.scss、甚至Vite插件自动加载的样式，都可能比你写的那行早一步绑定变量名。