SCSS变量直接写入CSS自定义属性无效，因其在编译期未通过#{}插值展开，导致浏览器将$primary视为非法字符串而静默丢弃；必须用#{$primary}显式插值，且需注意作用域、路径规范、编码格式及构建配置等细节。
SCSS变量直接写进CSS自定义属性为什么无效
因为$primary在编译期就该被替换成#07c160，但如果你没用#{} 告诉Sass“这里要展开”，它就真把你写的$primary当字符串输出。浏览器看到--color: $primary;，不认识$语法，整条声明静默丢弃。
常见错误写法：:root { --primary: $primary; } → 输出无效CSS；正确写法必须加插值：:root { --primary: #{$primary}; }
-
#{}是唯一合法通道，不是可选项 - 插值里不能写表达式：
#{$primary + 'ff'}会报错；需先算好再插：$primary-dark: darken($primary, 10%); --primary-dark: #{$primary-dark}; - 空格敏感：结尾多一个空格如
--c: #{$c} ;，某些Sass Loader会吞掉分号，导致值截断
为什么@use后变量仍报“Undefined variable”
根本不是变量没定义，而是作用域没打通。@use "vars" as v之后，你得用v.$primary，而不是直接$primary。Sass不自动把命名空间里的变量“倒出来”。
典型失败场景：
立即学习“前端免费学习笔记（深入）”；
- 在嵌套规则里漏掉
@use——它只能出现在文件顶部，嵌套块内写@use直接编译失败 - 路径带扩展名或下划线：
@use "src/_vars.scss"❌，应为@use "src/vars"✅ - 混用了
@import：只要文件里存在任意@import，整个编译链降级为legacy模式，@use全部失效
变量值在:root里输出为空或乱码
不是变量没传过去，而是源头被污染了。中文路径、UTF-8 BOM、或文件开头有空行，都会让Dart Sass拒绝解析整份文件——连报错都可能没有，CSS直接为空。
排查要点：
- 文件保存为
UTF-8 without BOM（VS Code默认满足，记事本默认带BOM） -
@charset "UTF-8";必须是第一行第一个字符，前面不能有任何空格或空行 - 项目路径不能含中文，例如
D:\我的项目\必须改成D:\my-project\ - 全局搜索
}，开启“显示空白字符”，检查每个右括号后是否有多余空格、Tab或逗号
Webpack打包后CSS里看不到变量注入结果
问题常不在SCSS本身，而在构建链末端。Rollup或Webpack的SCSS插件配置错一个参数，就导致CSS压根没生成。
关键配置项：
-
rollup-plugin-scss必须用fileName，不是name：scss({ fileName: "dist/main.css" }) - Webpack中若用
mini-css-extract-plugin，需禁用hmr: true，否则热更新时动态插入的<style>标签会插队 - 确保只有一个样式入口，例如
entry: { app: ["./src/index.js", "./src/styles/index.scss"] }，多个入口会触发多个<style>标签，顺序不可控
#{} 怎么写，而是误以为变量能跨阶段自动互通——SCSS变量和CSS变量之间没有隐式桥梁，所有连接都得手动、精准、无冗余地完成。 
