meta.module-variables 不存在于 sass 官方 api 中，调用会报错；scss 无法在编译时读取或计算 css 自定义属性（如 var(--primary-color)），因其为浏览器运行时机制；正确做法是通过 :export 将 scss 常量导出供 js 使用，并由 js 注入 css 变量。
meta.module-variables 不是 SCSS 的内置函数，也不存在于 Sass 官方 API 中——你在文档、源码或编译器里都找不到它。试图调用 meta.module-variables() 会直接报错 Undefined function.。
SCSS 无法在编译时“读取”运行时 CSS 变量
你真正想做的，大概率是：在 SCSS 里引用 --primary-color 这类 CSS 自定义属性的值，并参与计算（比如 lighten(var(--primary-color), 10%)）。这行不通。原因很硬：
-
var(--x)是浏览器运行时才解析的语法，Sass 编译器根本不会执行它，也不认识var函数 -
lighten()、rgba()等 Sass 函数只接受颜色字面量（如#3b82f6）、变量（如$primary）或插值结果，不接受var(--x)字符串 - 写
color: lighten(var(--primary-color), 10%)，Sass 会原样输出，浏览器看到的是非法 CSS，直接忽略整条声明
正确做法：用 :export 导出静态配置给 JS，再由 JS 注入 CSS 变量
如果你需要把 SCSS 里定义的主题色同步到 JS 并设为 CSS 变量，走标准路径：
- 在
_variables.scss中定义：$primary: #3b82f6; - 新建
theme.export.scss，只写：:export { primary: #{$primary}; } - JS 中
import theme from "./theme.export.scss";→ 得到{ primary: "#3b82f6" } - 再执行：
document.documentElement.style.setProperty("--primary-color", theme.primary);
注意：:export 只导出编译后的值，不是表达式；不能导出 darken($primary, 10%)，只能导出计算完的结果。
SCSS 里怎么安全使用 CSS 变量
唯一合法方式是把 var() 当作最终值直接赋给属性，不参与任何 Sass 计算：
- ✅ 正确：
background-color: var(--bg-color, #ffffff); - ❌ 错误：
background-color: lighten(var(--bg-color), 10%); - ❌ 错误：
border: 1px solid rgba(var(--bg-color-rgb), 0.2);（var(--bg-color-rgb)返回字符串，rgba()不认） - 若需 RGB 元组，必须在 JS 里解析十六进制，再用
setProperty("--bg-color-rgb", "59, 130, 246")手动拆解
所谓“动态读取”，本质是分两层：SCSS 负责生成初始结构和常量，JS 负责运行时桥接与注入。混淆这两个阶段，是绝大多数失败案例的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
