如何在没有 !default 值的情况下分配库的 sass 变量

Question

我们必须使用一个带有一些 css 的库，如下所示。到目前为止，我们使用

@import

导入它，但我们想更新为

@use

。

.esri-view {
  ...
  font-family: $font-family;

$font-family

变量没有默认值。因此，我们的

@use

不起作用：

@use '@arcgis/core/assets/esri/themes/base/_View.scss' with (
  $font-family: var(--our-internal-font-family)
);

错误：

✘ [错误] 未定义的变量。字体系列：$字体系列；

这可以通过库代码中的

$font-family: somefont !default;

轻松修复（根据 the sass docs），但由于 css 是从 npm 加载的，我们不能/不想更改它。 有没有可行的解决方法？

上下文：我们在 Angular 18 设置中使用它。

Answer 1

您可以在导入库之前创建一个定义 $font-family 变量的自定义包装 Sass 文件。例如：

// _custom-view.scss
$font-family: var(--our-internal-font-family);

@use '@arcgis/core/assets/esri/themes/base/_View.scss' with (
   $font-family: $font-family
);

然后，在项目中导入自定义包装文件：

@use './path/to/_custom-view';

此方法的工作原理是确保加载库样式时已经定义了变量。