我正在升級(jí)到美國(guó)網(wǎng)頁(yè)設(shè)計(jì)系統(tǒng)3，遇到了一個(gè)與使用@forward相關(guān)的有趣問題。

我的一些類擴(kuò)展似乎不起作用。這是我的代碼。

自定義組件

//extends.scss

@use "uswds-core" as *;

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

主樣式表:

//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";

“usa-checkbox__label-extend”類不會(huì)從原始& quot美國(guó)-復(fù)選框_ _ label & quotUSWDS類。如果我更改“style.scss”的最后一行

從

@forward "custom/extends";

到

@import "custom/extends";

它工作了。

如果我從“extends.scss”中復(fù)制代碼并將其放在“style.scss”中，它也可以工作。 有人有想法嗎？這是我第一次和@forward和@use合作。

根據(jù)amyleadem在USDWDS Repo for issue 4795中的回答，您需要將特定的包添加到文件的頂部。在這種情況下，它是“使用美國(guó)-復(fù)選框& quotas *。

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

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