Upgrading USWDS, @extend css class not showing in SCSS @forward

Question

I am upgrading to the US Web Design System 3, and am running into an interesting problem related to using @forward.

Some of my class extends do not seem to be working. Here is my code.

Custom component

//extends.scss

@use "uswds-core" as *;

.usa-checkbox__label-extend {
  @extend .usa-checkbox__label;
}

Main Stylesheet:

//style.scss
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
*/

// -------------------------------------
// Import theme settings
@forward "uswds-theme";

// -------------------------------------
// Import the necessary USWDS packages
@forward "uswds";

// -------------------------------------
// Import theme custom styles

// layout needs to be first
@forward "custom/layout";
@forward "custom/variables";

// Some other components

@forward "custom/extends";

The class “usa-checkbox__label-extend” will not pull from the original "usa-checkbox__label" USWDS class. If I change the last line of “style.scss”

from

@forward "custom/extends";

to

@import "custom/extends";

it works.

It also works if I copy the code from “extends.scss” and put it in “style.scss”. Does anyone have any thoughts? This is my first time working with @forward and @use.

Answer 1

Per the answer by amyleadem in the USDWDS Repo for issue 4795 you need to add the specific package to the top of your file. In this case it is @use usa-checkbox" as *.

@use "uswds-core" as *;
@use "usa-checkbox" as *;

.usa-checkbox__label-extend {
   @extend .usa-checkbox__label;
 }