Bagaimana untuk mengubah suai fail konfigurasi kamus gaya untuk mengeluarkan tanda tetapan huruf sebagai pembolehubah SCSS

Question

Saya baru dalam kedua-dua mereka bentuk token dan mereka bentuk sistem. Saya cuba menggunakan kamus gaya untuk menukar penanda reka bentuk saya kepada pembolehubah SCSS dan semuanya nampaknya berfungsi dengan baik kecuali penanda tipografi ternyata [object object] dalam fail pembolehubah. Tidak pasti apa yang saya lakukan salah. Sebarang bantuan amatlah dihargai. Di bawah ialah fail konfigurasi untuk kamus gaya saya.

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

Token saya JSON ialah

{
  "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"
    }
  }
}

Answer 1

Berdasarkan kod dan fail JSON token yang disediakan, nampaknya nilai tetapan taip tidak ditukar kepada pembolehubah SCSS dengan betul.

Masalahnya mungkin dengan "value" 属性在版式标记中的设置方式有关。目前，它是一个对象而不是字符串，这导致它显示为 [object object]. Untuk membetulkan perkara ini, anda perlu menetapkan nilai kepada rentetan dalam format yang boleh dihuraikan dan digunakan oleh transformasi tata huruf untuk mencipta pembolehubah SCSS yang diperlukan.

Sebagai contoh, runtuhkan objek nilai ke dalam rentetan tunggal.

Berikut ialah contoh token btn-dftypography selepas ia diperbaiki:

"btn-dftypography": {
  "value": "font-size: 1.8rem; font-weight: 400; line-height: 120%",
  "type": "typography"
}

Dulu macam ni:

"btn-dftypography": {
    "value": {
      "fontWeight": "",
      "fontSize": "1.8rem",
      "lineHeight": ""
    },
    "type": "typography"
  },

Nota: Anda juga perlu membuat perubahan yang serupa pada tanda tipografi anda yang lain.