CODEWITHSUNDEEP
csssassuswds
Billy Hunt
Billy Hunt

Reputation: 101

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

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.

Upvotes: 0

Views: 241

Answers (1)

Joe B.
Joe B.

Reputation: 1174

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

Upvotes: 1

Related Questions