Scss @use 在多个文件中使用一致的 `with` 参数

Question

我对 scss 中的

@use

和

@forward

规则仍然很陌生，所以我可能有点误解，希望得到一些帮助。

我有一个为供应商库设置配置的文件：uswds-theme.scss

@use 'uswds-core' with (
    $theme-show-notifications: false,
    // there will be a LOT of configurations in here
);

然后，在主要供应商导入中引用该文件：uswds.scss

@forward "./uswds-theme"; // this is mine

// other vendor stuff, e.g.
@forward "uswds-global";
@forward "uswds-helpers";
@forward "uswds-typography";
// ...

现在，我想在自己的文件中创建一些其他自定义组件，它们是自定义代码和利用 uswds-core 中的变量/混合/函数的组合：

@use 'uswds-core';

.custom-component {
    background: color('black');
    padding: 16px 0;
    // ...
}

问题是，最后一个

@use

不包含uswds-theme.scss中的配置，因此它没有引用相同的配置变量。我不想每次

@use

时都重新配置它，因为保持一致将是一场噩梦。 我如何构建它以便：

1. 配置有一份副本
2. 我可以利用变量
3. 组件可以位于自己单独的文件中

Answer 1

事实证明，您也可以将

with

包含在 @forward 中（本页示例：https://sass-lang.com/documentation/at-rules/forward/#configuring-modules）

所以，解决方案最终看起来像这样：

uswds-theme.scss

@forward 'uswds-core' with (
    $theme-show-notifications: false,
    // there will be a LOT of configurations in here
);

uswds.scss

@forward "./uswds-theme"; // this is mine

// other vendor stuff, e.g.
@forward "uswds-global";
@forward "uswds-helpers";
@forward "uswds-typography";
// ...

自定义组件.scss

@use 'uswds-core' as *;

.custom-component {
    background: color('black');
    padding: 16px 0;
    // ...
}