--- title: How to Generate Component CSS and Sass Files from Design... description: Part 18 of a design tokens workflow series, this guide explains how to split design tokens by component and use Style Dictionary to generate per-component CSS... canonical: https://daily.dev/posts/how-to-generate-component-css-and-sass-files-from-design-tokens-using-style-dictionary-mvrri8lyu twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How to Generate Component CSS and Sass Files from Design Tokens using Style Dictionary | daily.dev og:description: Part 18 of a design tokens workflow series, this guide explains how to split design tokens by component and use Style Dictionary to generate per-component CSS... og:url: https://daily.dev/posts/how-to-generate-component-css-and-sass-files-from-design-tokens-using-style-dictionary-mvrri8lyu og:image: https://api.daily.dev/og/posts/mvRRI8lYu.png og:image:alt: How to Generate Component CSS and Sass Files from Design Tokens using Style Dictionary og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How to Generate Component CSS and Sass Files from Design Tokens using Style Dictionary **[Always Twisted](https://daily.dev/sources/alwaystwisted)** · 6 min read · 0 upvotes · 0 comments ## Summary Part 18 of a design tokens workflow series, this guide explains how to split design tokens by component and use Style Dictionary to generate per-component CSS and Sass files. It covers directory structure options (centralised vs. co-located tokens), creating component token files, configuring Style Dictionary for per-component output, naming conventions, semantic token referencing, and combining per-component files with CSS @layer for specificity control. A working example is available in the accompanying GitHub repository. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I generate separate CSS and Sass files per component using Style Dictionary instead of one big token file? Configure Style Dictionary with separate build entries per component, each pointing to that component's token source file, and generating both a css/variables (or css/variables-with-layers) output and a scss output into per-component files like button.tokens.css and button.tokens.scss. Organize source tokens under a directory structure that mirrors the component library, then import the generated files alongside each component's code. _daily.dev surfaces practical Style Dictionary workflows for teams scaling component-based design tokens._ ### Should component design tokens reference semantic tokens or base tokens directly? Component tokens should reference semantic tokens, not base tokens directly. Pointing a component token to something like color.semantic.primary rather than a raw base value means a system-wide semantic change propagates to every component automatically, rather than requiring updates in each component's token file individually. _Developers structuring token layers for consistency can compare approaches like this on daily.dev._ ### Should design tokens be centralized in one folder or co-located with each component's code? It depends on team ownership: a centralized src/tokens/ directory works better when a dedicated design token team owns the whole system, while co-locating token files inside each component's own folder works better when multiple teams independently own separate components, since it avoids coordination overhead. A hybrid is common: base and semantic tokens stay centralized while component-specific tokens live beside their components. _daily.dev helps developers weigh tradeoffs like centralized versus co-located design token organization._ ## Similar posts on daily.dev - [How to scale CSS in micro frontends \(without losing your mind\)](https://daily.dev/posts/how-to-scale-css-in-micro-frontends-without-losing-your-mind--nblk2xap5) · LogRocket · 3 upvotes · 0 comments - [Design Tokens, Web Components, and CSS @layer](https://daily.dev/posts/design-tokens-web-components-and-css-layer-gknyqzubd) · Always Twisted · 5 upvotes · 0 comments - [Design Systems \+ Horizontal @layer – Master.dev Blog](https://daily.dev/posts/design-systems-horizontal-layer-master-dev-blog-vaqxpniun) · Frontend Masters · 6 upvotes · 0 comments - [Design Systems, Tokens and AI](https://daily.dev/posts/design-systems-tokens-and-ai-ywsx6j0z6) · Telerik · 0 upvotes · 0 comments - [Design tokens: The building blocks of a design system](https://daily.dev/posts/design-tokens-the-building-blocks-of-a-design-system-ja5tvulef) · RUBYLAND · 1 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design), [#design-systems](https://daily.dev/tags/design-systems) [View this post on daily.dev](https://daily.dev/posts/how-to-generate-component-css-and-sass-files-from-design-tokens-using-style-dictionary-mvrri8lyu) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How to Generate Component CSS and Sass Files from Design Tokens using Style Dictionary","url":"https://daily.dev/posts/how-to-generate-component-css-and-sass-files-from-design-tokens-using-style-dictionary-mvrri8lyu","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-generate-component-css-and-sass-files-from-design-tokens-using-style-dictionary-mvrri8lyu"},"datePublished":"2026-08-11T11:26:23.092Z","dateModified":"2026-09-14T07:16:49.746Z","description":"Part 18 of a design tokens workflow series, this guide explains how to split design tokens by component and use Style Dictionary to generate per-component CSS...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/67d9be942a7b40c472f0a4a02084c9bc?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/67d9be942a7b40c472f0a4a02084c9bc?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Always Twisted","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Always Twisted","logo":"https://media.daily.dev/image/upload/s--YjoaNten--/f_auto,q_auto/v1765712927/logos/alwaystwisted","url":"https://daily.dev/sources/alwaystwisted"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-to-generate-component-css-and-sass-files-from-design-tokens-using-style-dictionary-mvrri8lyu","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,ui-design,design-systems","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Always Twisted","item":"https://daily.dev/sources/alwaystwisted"},{"@type":"ListItem","position":3,"name":"How to Generate Component CSS and Sass Files from Design Tokens using Style Dictionary"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-to-generate-component-css-and-sass-files-from-design-tokens-using-style-dictionary-mvrri8lyu#faq","mainEntity":[{"@type":"Question","name":"How do I generate separate CSS and Sass files per component using Style Dictionary instead of one big token file?","acceptedAnswer":{"@type":"Answer","text":"Configure Style Dictionary with separate build entries per component, each pointing to that component's token source file, and generating both a css/variables (or css/variables-with-layers) output and a scss output into per-component files like button.tokens.css and button.tokens.scss. Organize source tokens under a directory structure that mirrors the component library, then import the generated files alongside each component's code. daily.dev surfaces practical Style Dictionary workflows for teams scaling component-based design tokens."}},{"@type":"Question","name":"Should component design tokens reference semantic tokens or base tokens directly?","acceptedAnswer":{"@type":"Answer","text":"Component tokens should reference semantic tokens, not base tokens directly. Pointing a component token to something like color.semantic.primary rather than a raw base value means a system-wide semantic change propagates to every component automatically, rather than requiring updates in each component's token file individually. Developers structuring token layers for consistency can compare approaches like this on daily.dev."}},{"@type":"Question","name":"Should design tokens be centralized in one folder or co-located with each component's code?","acceptedAnswer":{"@type":"Answer","text":"It depends on team ownership: a centralized src/tokens/ directory works better when a dedicated design token team owns the whole system, while co-locating token files inside each component's own folder works better when multiple teams independently own separate components, since it avoids coordination overhead. A hybrid is common: base and semantic tokens stay centralized while component-specific tokens live beside their components. daily.dev helps developers weigh tradeoffs like centralized versus co-located design token organization."}}]} ```