CODEWITHSUNDEEP
webpacksassfile-structuredart-sassuswds
allicarn
allicarn

Reputation: 2919

Scss @use with consistent `with` parameters across multiple 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

Upvotes: 0

Views: 23

Answers (1)

allicarn
allicarn

Reputation: 2919

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;
    // ...
}

Upvotes: 0

Related Questions