Design Token的使用

最近公司要求设计使用这个工具  交付设计稿时 给前端一个.json文件 里面包含了 设计稿中的css变量，记录一下使用的过程
**1、在项目安装 yarn add style-dictionary --dev
2、配置构建文件  在根目录创建config.json文件**

"source": ["designToken/*.json"],
source 文件来源，也就是设计给的json文件 designToken/*.json 表示designToken文件夹下所有的json文件   

 "buildPath": "output/",
这个是生成的文件路径 ouput文件夹

"files": [
        {
          "destination": "_variables.css",
          "format": "css/variables"
        }
      ]
 "destination": "_variables.css", 这个就是生成的文件名

3、"build:tokens": "style-dictionary build"

在package.json里面加上这条命令

**4、构建命令 ： npm run build:tokens**

执行成功之后就会在根目录下生成我们需要的文件