scss变量无法在javascript中直接读取，因其仅存在于编译阶段，构建时已被替换为具体值并消失；js需通过css自定义属性（--primary）或.module.scss的:export机制间接获取。
SCSS变量无法在JavaScript中直接读取，是因为它们根本不会出现在运行时的浏览器环境中——编译完成后就彻底消失了。
SCSS变量在构建阶段就被“蒸干”了
SCSS不是运行时语言。Webpack、Vite 等工具在打包时就把 $color、$spacing-sm 这类变量替换成具体值（比如 #3498db 或 0.5rem），然后生成纯 CSS。最终注入页面的只有 CSS 规则，没有变量名、没有作用域、也没有元数据。
- 你在 DevTools 的 Styles 面板里看到的永远是展开后的值，找不到
$primary -
import './vars.scss'在 JS 中只会触发样式注入，不会返回任何对象 - 试图用
getComputedStyle(document.documentElement).getPropertyValue('$primary')必然返回空字符串
:export 导出仅对 .module.scss 生效
想让 JS 拿到 SCSS 值，必须借助 CSS Modules 机制和 :export 块，但有硬性前提：文件名必须是 xxx.module.scss（不是 xxx.scss）。
- 错误写法：
import vars from './variables.scss'→vars是 undefined 或空对象 - 正确写法：
import vars from './variables.module.scss'，且文件内含:export { primary: $primary; } - Vite 和 Webpack 都依赖这个后缀识别模块化行为；漏掉
.module就等于关掉了导出通道
CSS 自定义属性才是真正的通信桥梁
如果要实现「JS 控制样式」或「JS 读取设计系统值」，应该把 SCSS 变量映射为 CSS 自定义属性（--primary），再由 JS 通过 getPropertyValue() 读取。
- SCSS 中必须用插值：
--primary: #{$primary};，否则会字面输出$primary字符串 - 读取时注意单位处理：
parseInt(getComputedStyle(doc).getPropertyValue('--gap'), 10) - 动态更新更简单：
document.documentElement.style.setProperty('--primary', '#e74c3c') - 不支持在
:visited等受限伪类中使用自定义属性——这是浏览器强制限制，绕不过
全局 SCSS 变量无法被 JS 直接共享
即使你在 vite.config.js 里用 css.preprocessorOptions.sass.additionalData 注入了全局变量，JS 仍然拿不到它们。这个配置只影响 SCSS 编译上下文，不产生运行时暴露点。
- 常见误区：以为
@use 'variables' as *;后 JS 就能访问$variables—— 实际上毫无关联 - 可行折中：单独建一个
theme.module.scss，用:export显式导出你需要的子集 - 复杂主题系统建议放弃“复用同一份 SCSS 变量”，改用 JSON 配置 + SCSS/JS 双向生成（如通过脚本把
theme.json同时生成theme.scss和theme.js）
最易忽略的一点：CSS 自定义属性的值是字符串，哪怕你设的是 70px，JS 读出来也是 "70px"。不做 parseInt 或 parseFloat 处理，直接参与计算就会出错。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
