[Question]: How to import and use just the NJDWS theme overrides for applications already importing USWDS

[brandonlenz]

For applications that import uswds (e.g. through a component library like react-uswds), is there a way to use just the NJWDS theme settings scss, rather than importing the entirety of njwds's css?

In our case, speaking specifically about https://github.com/newjersey/dol-ui-claimant-intake, and the following (low priority) issue

I'm no scss expert, and could use a little help filling my knowledge gap, and if there's not yet a way to do this, perhaps coordinate the ability to do so.

Thanks!

[namanaman]

Thanks @brandonlenz happy to think on how we can offer a lighter version of the NJWDS for your use case. To clarify, are you asking if we can exclude the compiled assets in the NJWDS package since you don't use them, and just have the src files (including the theme)?

In terms of importing USWDS, I'm not entirely sure how it works, but USWDS should be a dependency shared by both NJWDS and react-uswds, meaning it shouldn't cause double the size since npm would only load it once?

[brandonlenz]

@namanaman my understanding is that we already have all of the uswds styles needed via our transitive dependency on uswds through React USWDS. We have the ability to set various theme settings to override defaults (like primary color) with lightweight .scss theme settings.

Our first attempt at using NJWDS pulled in njwds/dist/css/styles.css. I think @abroddrick ran into trouble trying to use just the /src/sass/_uswds-theme.scss which I would otherwise think would be all we need.

Sorry it's been a bit since I followed up on this issue, and my memory might be hazy. It seems like we're not doing something right, or something isn't available for use as we'd expect

[brandonlenz]

See: https://github.com/newjersey/dol-ui-claimant-intake/blob/main/client/src/styles/styles.scss#L32

[kleinschmidtj]

To give more context to this issue, I was looking at adding the theme file from NJWDS as well.

// Import individual theme settings
@forward '@newjersey/njwds/src/sass/_uswds-theme.scss';
@forward 'uswds';

// Import theme custom styles
@forward 'custom-styles';

When I do that in our app, I get this error:

error - ./src/styles/styles.scss:4:0
Module not found: Can't resolve '../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/fonts/roboto-mono/roboto-mono-v5-latin-300.woff2'

Import trace for requested module:
./src/styles/styles.scss
./src/pages/_app.tsx

It appears that this will always fail in our app (NextJS) because we need the $theme-image-path and $theme-font-path set while NJWDS uses a separate gulp file to handle this and the compilation of those assets. Is there some way to expose those two variables for other developers to set? Thanks!