Html 是否用CSS变量覆盖引导4个Sass变量？

我试图在角度应用程序中使用CSS变量将Bootstrap 4中的默认主Sass变量覆盖为自定义颜色，如下所示：

@import '../dist/library/styles/theme.scss';
@import '../node_modules/bootstrap/scss/bootstrap';

样式。scss

我在编译应用程序时遇到以下错误：

Failed to compile.

./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
                                         ^
      $color: var(--primary) is not a color.
    ╷
181 │ $link-hover-color:                        darken($link-color, 15%) !default;
    │                                           ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\bootstrap\scss\_variables.scss 181:43  @import
  node_modules\bootstrap\scss\bootstrap.scss 9:9      @import
  stdin 19:9                                          root stylesheet
      in C:\Work\node_modules\bootstrap\scss\_variables.scss (line 181, column 43)

有没有办法解决这个问题并使用css变量覆盖引导sass变量

还有一个，但我无法用它解决我的问题

更新

实际上，我已经创建了一个供内部使用的角度组件库。我在这个库中使用CSS变量实现了主题化，因此我可以动态更改它们的值，并允许用户为应用程序选择主题

因此，在我的库中，我有不同的主题文件，下面是其中之一：

theme.scss

现在，我在angular appstyles.scss文件中导入此主题文件，如下所示：

@import '../dist/library/styles/theme.scss';
@import '../node_modules/bootstrap/scss/bootstrap';

请看下面的图片，引导css变量已经被覆盖，但是如果我使用像

btn btn primary

这样的引导类，它仍然显示旧的蓝色

---

这是不可能的，因为CSS自定义属性和SASS变量是两个独立的东西

CSS自定义属性可以在运行时通过Javascript进行更改。
另一方面，SASS变量是静态的，它们将被生成，然后在

.css

-文件中被硬编码为值。例如，SASS的

darken（）

功能获取输入字符串（例如十六进制值）并输出该十六进制值的变暗版本

但是bootstrap已经使用了CSS自定义属性，所以可能您只是用错了它们。也许如果你扩大你想要实现的目标，也许我们可以更好地帮助你

现在我们能给你的唯一答案是：这是不可能的

当前SCSS文件中的表达式（公式）不允许使用此技术

---

github的一个问题是将这些表达式从SCSS样式中移出，并允许通过单独的变量进行设置，例如，您可以看到一个PR，其中显示了在引导中需要进行哪些更改，以及如何为警报组件启用CSS变量模式

您不能这样做，因为CSS属性和sass变量的工作方式不同。您不能将内置的sass函数

darken

与css自定义属性一起使用。它需要一个颜色值，并为您提供一个更暗的颜色。css属性不是这样工作的，它们是动态的，可以更改。@是否有其他方法或解决方案？我已经在我的应用程序中实现了主题化，所以我需要css变量。@UsmanAnwar-我有完全相同的情况。你有什么解决办法吗？@Nimmi没有，我必须单独重写所有必需的引导类。如果您能找到解决方案，请务必在此处共享。@UsmanAnwar感谢您的更新，我们将尝试，如果我能找到什么，我们将在此处更新。我刚刚更新了我的问题。您能看一下吗？您能更新更多吗？在您的屏幕截图中，它显示您的绿色用于变量。这在哪里被覆盖？最终组件中的值是如何使用的？是的，即使绿色用于变量，但如果我使用任何引导组件，相同的默认蓝色应用于引导组件，由此我可以得出结论，引导没有使用CSS变量作为其样式。theme.scss文件中的变量被更新问题中的变量覆盖。这根本不能回答我的问题，如果您不想提供更多信息，则无法帮助您。

@import '../dist/library/styles/theme.scss';
@import '../node_modules/bootstrap/scss/bootstrap';