在角离子项目中使用外部 scss 变量

Question

所以我正在开发一个现有的角度离子应用程序，使用：角度 12 和离子 5。我需要使用一个专门用于生成样式的外部库，在 node_modules 中导入。

只有一个文件要导入，其中包含应用程序所需的所有元素，其中包含一些代码，如下所示：

自定义 css 库/dist/lib.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);
}

不考虑颜色，开发人员控制台在“样式”选项卡上显示错误：-- error is not defined

为了在我的 scss 文件中加载变量，我缺少什么来正确声明/导入文件？

Answer 1

我认为您需要像这样配置angular.json文件。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "your-project": {
      "projectType": "application",
....
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            .....
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "node_modules/..../yourstuff.css"
              },
....

此外，如果您可以提供stackblitz链接或codesandbox ，那就太好了。 我们可以更轻松地看到您的问题并更快地解决它。