조판 표시를 SCSS 변수로 출력하도록 스타일 사전 구성 파일을 수정하는 방법
P粉481035232
P粉481035232 2024-02-03 16:19:02
0
1
1460

저는 토큰 디자인과 시스템 디자인 모두 처음입니다. 스타일 사전을 사용하여 디자인 마크업을 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`
      }]
    }
  }
}

P粉481035232
P粉481035232

모든 응답(1)
P粉187160883

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

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

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

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

으아악

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

으아악

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿