Angular 18下如何为无!default的第三方Sass库变量赋值？

问题背景 #

我们原通过@import导入ArcGIS的SCSS组件库，现升级为@use语法时遇到问题：库中$font-family变量未添加!default声明，导致使用@use ... with配置变量时报错：

✘ [ERROR] Undefined variable. font-family: $font-family;

库核心代码片段：

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

我们的@use尝试代码：

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

因无法修改npm库源码，以下是Angular 18环境下的可行解决方案：

可行解决方案 #

1. 提前注入变量后导入 #

在引入目标SCSS文件之前，先定义$font-family变量，利用SCSS的变量作用域优先级覆盖库的引用：

// 先定义变量
$font-family: var(--our-internal-font-family);
// 再导入库
@use '@arcgis/core/assets/esri/themes/base/_View.scss';

• 全局使用：在src/styles.scss中按此顺序编写，确保所有组件引用前变量已定义
• 组件内使用：在组件的SCSS文件顶部先定义变量，再执行@use

2. 通过Angular配置全局注入变量 #

利用Angular的stylePreprocessorOptions自动为所有SCSS文件注入变量，无需手动在每个文件定义：
修改angular.json中项目的build配置：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "additionalData": "$font-family: var(--our-internal-font-family);"
            }
          }
        }
      }
    }
  }
}

配置完成后，直接@use库即可，变量会自动注入：

@use '@arcgis/core/assets/esri/themes/base/_View.scss';

3. 封装桥接SCSS文件统一管理 #

创建自定义桥接文件（如src/styles/arcgis-view-bridge.scss），集中处理变量定义和库导入：

// 桥接文件：统一配置第三方库变量
$font-family: var(--our-internal-font-family);
@use '@arcgis/core/assets/esri/themes/base/_View.scss';

项目中所有需要引用该库的地方，统一@use这个桥接文件：

@use './arcgis-view-bridge.scss';

此方案便于后续统一调整变量配置，避免重复代码。

4. CSS变量直接覆盖（快速降级方案） #

若SCSS层面的配置遇到阻碍，可直接用CSS变量的优先级覆盖库样式：

.esri-view {
  font-family: var(--our-internal-font-family) !important;
}

无需修改SCSS引入逻辑，直接在全局或组件样式中添加即可，适合快速解决问题，但需注意!important的使用场景，避免引发其他样式冲突。

内容的提问来源于stack exchange，提问作者sandrooco