How to add @use in Sass files to load dependencies when tokens are split into several files

[nhoizey]

Hello, I'm trying to use outputReferences: true for Sass targets while generating several files (mapping ouput to input), and I'm looking for advice about how to manage dependencies.

I would like to be able to have one single @use "tokens/components/button"; in a project button's Sass code, and not need to add multiple @use manually for all other tokens/**/*.scss Sass files this one depends on.

So I would like to have these @use — only the ones that are needed — automatically put into tokens/components/_button.scss at build time.

Is anyone already working like that, or having advice about how best to do it?

[dbanksdesign]

A very small example of what you want to achieve in output files:

// tokens/component/button.scss
@use "tokens/color.scss";
$button-background-color: $color-background-primary;

// tokens/color.scss
$color-background-primary: #fff;

Correct?

I can kind of see how it could be done in a custom format... What you would do is in the custom format,

1. Iterate over all tokens (should be filtered in the config by filePath so only button tokens are in a buttons.scss file)
2. If the token has a reference, get the referenced token and that token should have a filePath attribute. Save that in an array to later build all the @use imports at the top of the file. You'll need to modify the filePath in a way that matches how you are building the other files
3. Output each token as you normally would for SCSS

For the configuration you could follow the matching-build-files example to build files 1:1 with input files.

Does that make sense?

[nhoizey]

@dbanksdesign it makes perfect sense, I'll try to build it, thanks! 👍

[jorenbroekema]

Closing question issue, considered as answered.