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:

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

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:

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

• webpack
• sass
• file-structure
• dart-sass
• uswds

Share Improve this question Follow asked Nov 19, 2024 at 16:41 allicarnallicarn 2,91922 gold badges2929 silver badges4747 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Turns out that you can include with with @forward as well (example on this page: https://sass-lang/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;
    // ...
}