升级USWDS,@extend css类未在SCSS中显示@forward

vuktfyat  于 2023-05-30  发布在  其他
关注(0)|答案(1)|浏览(146)

我正在升级到美国网页设计系统3,遇到了一个与使用@forward相关的有趣问题。
我的一些类扩展似乎不起作用。这是我的代码。
自定义组件

//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”将不会从原始的“usa-checkbox__label”USWDS类中拉取。如果我更改“style.scss”的最后一行

@forward "custom/extends";

@import "custom/extends";

这很有效。
如果我从“extends.scss”中复制代码并将其放入“style.scss”中,它也可以工作。有人有什么想法吗?这是我第一次使用@forward和@use。

k10s72fa

k10s72fa1#

根据amyleadem在USDWDS Repo for issue 4795中的回答,您需要将特定的软件包添加到文件的顶部。在这种情况下,它是@use usa-checkbox" as *

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

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

相关问题