조판 표시를 SCSS 변수로 출력하도록 스타일 사전 구성 파일을 수정하는 방법

Question

저는 토큰 디자인과 시스템 디자인 모두 처음입니다. 스타일 사전을 사용하여 디자인 마크업을 SCSS 변수로 변환하려고 하는데 타이포그래피 마크업이 변수 파일에 [object object]로 나타나는 것을 제외하면 모든 것이 잘 작동하는 것 같습니다. 내가 뭘 잘못하고 있는지 잘 모르겠습니다. 어떤 도움이라도 대단히 감사하겠습니다. 다음은 내 스타일 사전의 구성 파일입니다.

으아악

내 토큰 JSON은

입니다.

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`
      }]
    }
  }
}

Answer 1

제공된 코드 및 토큰 JSON 파일에 따르면 조판 값이 SCSS 변수로 올바르게 변환되지 않는 것으로 보입니다.

문제는 "value" 属性在版式标记中的设置方式有关。目前，它是一个对象而不是字符串，这导致它显示为 [object object]에 있을 수 있습니다. 이 문제를 해결하려면 조판 변환이 구문 분석하고 필요한 SCSS 변수를 생성하는 데 사용할 수 있는 형식의 문자열로 값을 설정해야 합니다.

예를 들어 값 개체를 단일 문자열로 축소합니다.

수정된 btn-dftypography 토큰의 예는 다음과 같습니다.

으아악

이것은 다음과 같았습니다:

으아악

참고: 다른 타이포그래피 표시에도 비슷한 변경을 해야 합니다.