我对设计代币和设计系统都是新手。我正在尝试使用样式字典将我的设计标记转换为 SCSS 变量,看起来一切正常,除了排版标记在变量文件中结果为 [object object] 。不确定我做错了什么。任何帮助,将不胜感激。下面是我的样式字典的配置文件。
const StyleDictionary = require('style-dictionary');
module.exports = {
// This will match any files ending in json or json5
source: [`tokens/*.json`],
transforms: [
{
type: 'typography',
fields: {
fontSize: 'fontsize',
fontWeight: 'fontWeight',
lineHeight: 'lineHeight',
},
},
],
platforms: {
scss: {
buildPath: `style/`,
files: [{
destination: `_variables.scss`,
format: `scss/variables`
}]
}
}
}
我的令牌 JSON 是
{
"btn": {
"primary": {
"default": {
"value": "{colors.accent.sun}",
"type": "color"
},
"hover": {
"value": "{colors.accent.l_sun}",
"type": "color"
},
"focus": {
"value": "{colors.accent.sun}",
"type": "color"
},
"focusbr": {
"value": "{colors.accent.gold}",
"type": "color"
},
"click": {
"value": "{colors.accent.gold}",
"type": "color"
},
"txtcolor": {
"value": "{colors.neutral.black}",
"type": "color"
}
},
"disabled": {
"value": "{colors.neutral.ll_grey}",
"type": "color"
},
"radius": {
"value": ".4rem",
"type": "borderRadius"
},
"brwidth": {
"value": ".2rem",
"type": "borderWidth"
},
"ghostbg": {
"value": "{colors.neutral.white}",
"type": "color"
},
"ghost": {
"defaultbr": {
"value": "{colors.primary.m_blue}",
"type": "color"
},
"focusbr": {
"value": "{colors.primary.d_blue}",
"type": "color"
},
"clickbr": {
"value": "{colors.neutral.ll_grey}",
"type": "color"
}
},
"transparent": {
"defaultbr": {
"value": "{colors.neutral.white}",
"type": "color"
},
"focusbr": {
"value": "{colors.primary.azure}",
"type": "color"
},
"click": {
"value": "{colors.primary.azure}",
"type": "color"
}
},
"transparentbg": {
"value": "{colors.neutral.white}",
"type": "color"
},
"textcolor": {
"value": "{colors.primary.m_blue}",
"type": "color"
}
},
"btn-df": {
"padding": {
"value": "1.6rem 3.2rem",
"type": "spacing"
}
},
"btn-dftypography": {
"value": {
"fontWeight": "",
"fontSize": "1.8rem",
"lineHeight": ""
},
"type": "typography"
},
"btn-smtypography": {
"value": {
"fontSize": "1.4rem",
"fontWeight": "",
"lineHeight": ""
},
"type": "typography"
},
"btn-mdtypography": {
"value": {
"fontSize": "1.6rem"
},
"type": "typography"
},
"btn-dftypographystyles": {
"value": {
"fontWeight": "400",
"lineHeight": "120%"
},
"type": "typography"
},
"btn-md": {
"padding": {
"value": "1.4rem 3.2rem",
"type": "spacing"
}
},
"btn-sm": {
"padding": {
"value": "1.4rem 3.2rem",
"type": "spacing"
}
}
} Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
根据提供的代码和令牌 JSON 文件,排版值似乎未正确转换为 SCSS 变量。
问题可能与
"value"属性在版式标记中的设置方式有关。目前,它是一个对象而不是字符串,这导致它显示为[object object]。 要解决此问题,您需要将该值设置为具有排版转换可以解析并用于创建所需 SCSS 变量的格式的字符串。例如将值对象折叠成单个字符串。
以下是
btn-dftypography令牌修复后的示例:"btn-dftypography": { "value": "font-size: 1.8rem; font-weight: 400; line-height: 120%", "type": "typography" }以前是这样的:
"btn-dftypography": { "value": { "fontWeight": "", "fontSize": "1.8rem", "lineHeight": "" }, "type": "typography" },注意:您还需要对其他排版标记进行类似的更改。