能，Style Dictionary 可生成 :root CSS 变量，但需显式配置 platform 为 css、transformGroup 为 "css"、format 为 "css/variables"，且 source 路径须匹配 tokens 文件，否则静默失败。
Style Dictionary 能不能直接生成 :root CSS 变量？
能，但默认不生成标准 :root 块，必须显式配置 format: "css/variables" 并指定平台为 css。常见错误是只配了 scss 或 js 平台，结果跑完命令没看到 variables.css 文件。
关键点在于：CSS 变量输出依赖 transformGroup: "css"（不是 "scss"），且格式名必须是 "css/variables" —— 拼错成 "css/variables-css" 或漏掉 / 都会静默失败。
- 确保
source路径匹配你的 tokens 文件，比如"tokens/**/*.json" -
buildPath建议设为"src/css/"这类前端可直接 import 的路径，避免写成"dist/"导致开发时找不到 - 若 tokens 中用了嵌套结构（如
color.primary.default），默认转换后变量名是--color-primary-default，无需额外配置
如何让 CSS 变量支持暗色模式切换？
Style Dictionary 本身不处理媒体查询或主题切换逻辑，它只负责“生成静态变量”。要实现暗色模式，得靠两步：先用 Style Dictionary 输出两套变量（light.json 和 dark.json），再在 CSS 中用 @media (prefers-color-scheme: dark) 或自定义 class 切换作用域。
典型做法是把变量按主题拆到不同文件：
立即学习“前端免费学习笔记（深入）”；
-
tokens/color/light.json→ 定义color.background.base为"#ffffff" -
tokens/color/dark.json→ 同一 key 定义为"#1f2937" - 配置中用两个
platform分别指向不同source，或用include+ 条件过滤
注意：不要试图在单个 JSON 里写 "$value": {"light": "#fff", "dark": "#111"} —— Style Dictionary 不解析这种结构，会直接报 Invalid token value 错误。
为什么生成的 CSS 变量没生效？检查这三处
变量生成了，但浏览器开发者工具里查不到或不起作用，大概率卡在这三个地方：
-
未正确引入：生成的
variables.css必须在所有用到变量的 CSS 之前@import或<link>，顺序错就全白搭 -
作用域丢失：Style Dictionary 默认输出全局
:root，但如果目标平台配成"css/variables"却漏写了selector: ":root"（某些旧版 config 需显式声明），变量可能被挂到html或其他选择器下 -
值类型未转换：比如 tokens 里写
"size.spacing.large": {"value": "24"}，没带单位，CSS 里就会变成--size-spacing-large: 24，浏览器不认；应写成"24px"或用transform注入单位
和 Tailwind、SCSS 等共存时怎么避免冲突？
Style Dictionary 生成的是原始 CSS 变量，和 Tailwind 的 theme.extend 或 SCSS 的 $variable 是平行关系，不自动打通。想复用同一套 token 数据，必须手动桥接：
- 对 Tailwind：用
javascript/tailwind格式生成 JS 对象，再在tailwind.config.js的theme.extend里require()进来 - 对 SCSS：用
scss/variables格式生成_tokens.scss，再在主 SCSS 文件里@use或@import - 绝对不要让 Style Dictionary 直接覆盖
tailwind.config.js或_variables.scss的手写部分——它只管生成，不管 merge
最易忽略的一点：CSS 变量名和 SCSS 变量名语义一致，但命名风格可能冲突。比如 color-primary-500 在 CSS 里是 --color-primary-500，在 SCSS 里却是 $color-primary-500，中间的 - 和 $ 不能混用，否则编译报错。
