使用Style Dictionary无法在同JSON文件内引用颜色值

核心问题原因 #

你定义的highlight.gray.light没有包含value字段，直接写了引用字符串，Style Dictionary只会识别带value字段的令牌，所以这部分被忽略了。

修正后的tokens JSON #

// colors.json
{
 "color": { 
    "base": { 
        "gray": { 
            "light": { "value": "#CCCCCC" }, 
            "medium": { "value": "#999999" }, 
            "dark": { "value": "#111111" } 
        }, 
        "red": { "value": "#FF0000" },
        "green": { "value": "#00FF00" }
    }, 
    "highlight": { 
        "gray": { 
            "light": { "value": "{color.base.gray.light}" }
            } 
        } 
    } 
}

关键注意事项 #

• 所有令牌必须包含value字段，无论直接写值还是引用其他令牌
• 引用格式{token.path}是正确的，只要路径对应存在的令牌就会被解析
• 若后续拆分JSON文件，只需在Style Dictionary配置中指定多个源文件路径即可，无需额外复杂脚本（SD会自动合并所有源令牌）

基础npm包配置示例（确保引用生效） #

const StyleDictionary = require('style-dictionary');

StyleDictionary.extend({
  source: ['tokens/**/*.json'], // 单个或多个JSON文件都支持
  platforms: {
    scss: {
      transformGroup: 'scss',
      buildPath: 'build/',
      files: [{
        destination: '_variables.scss',
        format: 'scss/variables'
      }]
    }
  }
}).buildAllPlatforms();

运行后生成的SCSS会包含：

$color-base-gray-light: #CCCCCC;
$color-base-gray-medium: #999999;
$color-base-gray-dark: #111111;
$color-base-red: #FF0000;
$color-base-green: #00FF00;
$color-highlight-gray-light: #CCCCCC;

内容的提问来源于stack exchange，提问作者dinoDonga