Configuring the Style Dictionary Integration


Style Dictionary is a build system that allows you to define styles once, in a way for any platform or language to consume.

In other words, it's a service that enables you to pass in a single source set of design tokens and output files for incorporating those core styles into any time of digital application, whether your newest React application or a legacy Sharepoint site.

Knapsack integrates directly with Style Dictionary, saving your team the need to write custom integrations or web services.

Setting Up the Style Dictionary Integration

  1. Familiarize yourself with the Style Dictionary documentation. It's important to understand the format Style Dictionary expects when configuring output.
  2. Pull down a copy of the repo and run Knapsack locally. Follow our Technical Guides to set up a local workspace.
  3. Locate the Knapsack Style Dictionary configuration file. During the installation process, Knapsack adds a style-dictionary.config.js file to the root directory of the repo. Locate this file in your local copy 
  4. Configure Style Dictionary in your Knapsack-connected repo. Following the Style Dictionary documentation to set up the integration to your specifications.

Once the changes are saved to your local file, the integration is configured. 

Using Style Dictionary Outputs

Once the integration is configured, all files our output into the /dist directory when working locally. This enables developers to grab and work with the output files in any way they choose, whether incorporating into their application directly, or distribution through a CI workflow.

For questions or to discuss strategies for leveraging Style Dictionary, contact us at