Scss @use with consistent `with` parameters across multiple files

Question

I'm still new to the @use and @forward rules in scss, so I may be misunderstanding a bit and would appreciate some help.

I have a file that sets up a configuration for a vendor library: uswds-theme.scss

@use 'uswds-core' with (
    $theme-show-notifications: false,
    // there will be a LOT of configurations in here
);

Then, that file is referenced in the main vendor imports: uswds.scss

@forward "./uswds-theme"; // this is mine

// other vendor stuff, e.g.
@forward "uswds-global";
@forward "uswds-helpers";
@forward "uswds-typography";
// ...

Now, I have some other custom components that I want to create in their own files, which is a combination of custom code and leveraging variables/mixins/functions from uswds-core:

@use 'uswds-core';

.custom-component {
    background: color('black');
    padding: 16px 0;
    // ...
}

The problem is, this last @use does not include the configuration from uswds-theme.scss, so it's not referencing the same configured variables. I don't want to re-configure it each time I @use it, because that would be a nightmare to keep consistent. How do I structure this so that:

There is one copy of the configuration
I can leverage the variables
Components can be in their own separate files

allicarn · Accepted Answer · 2024-11-20 16:45:20Z

0

Turns out that you can include with with @forward as well (example on this page: https://sass-lang.com/documentation/at-rules/forward/#configuring-modules)

So, the solution ended up looking like this:

uswds-theme.scss

@forward 'uswds-core' with (
    $theme-show-notifications: false,
    // there will be a LOT of configurations in here
);

uswds.scss

@forward "./uswds-theme"; // this is mine

// other vendor stuff, e.g.
@forward "uswds-global";
@forward "uswds-helpers";
@forward "uswds-typography";
// ...

custom-component.scss

@use 'uswds-core' as *;

.custom-component {
    background: color('black');
    padding: 16px 0;
    // ...
}

answered Nov 20, 2024 at 16:45

allicarn

2,9292 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Scss @use with consistent `with` parameters across multiple files

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related