我正在研究一个现有的角离子应用，使用：angular 12和ionic 5。我需要使用一个专门用于生成样式的外部库，导入到node_modules中。
只有一个文件要导入，其中包含应用程序中所需的所有元素，其中包含的一小段代码如下：

自定义css库/dist/库.css

.theme-one,
:root {
  --bg-primary: 0, 40, 87;
  --bg-secondary: 115, 154, 188;
  --success: 34, 197, 94;
  --error: 239, 68, 68;
}
.theme-two{
  --bg-primary: 207, 16, 45;
  --bg-secondary: 204, 204, 204;
  --success: 34, 197, 94;
  --error: 239, 68, 68;
}

.btn--primary {
  --tw-border-opacity: 1;
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  background-color: rgba(var(--bg-primary), var(--tw-bg-opacity));
  border-color: rgba(var(--bg-primary), var(--tw-border-opacity));
  color: rgba(var(--primary-contrast), var(--tw-text-opacity));
}

我已将此文件导入global.scss文件：

/* External CSS*/
@import 'custom-css-library/dist/lib.css';

然后在index.html中的标记上使用主类

<bodyclass="theme-one">
    <app-root></app-root>
</body>

当我使用基本类时，一切似乎都按预期工作。当我试图直接引用变量时，我的麻烦就开始了。
例如，当需要显示错误消息时，我在页面中尝试了以下操作：

页面.html

<div>
  <p class="custom-error">Some custom error</p>
</div>

第.scss页

.custom-error {
  color: var(--error);
}

不考虑颜色，开发人员控制台在“style”选项卡上显示错误：*--错误未定义 *
为了在scss文件中加载变量，正确声明/导入文件时遗漏了什么？