Question

我正在尝试使用Angular应用程序中的CSS变量将Bootstrap 4中的默认Primary Sass变量覆盖为自定义颜色，

styles.scss

:root {
  --primary: #00695c;
}

$myPrimary: var(--primary);

$primary: $myPrimary; // This does not work

@import '../node_modules/bootstrap/scss/bootstrap';

编译应用程序时出现此错误：

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变量覆盖bootstrap sass变量？

还有另一个related question，但是我无法解决它的问题。

更新

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

因此在我的图书馆中，我有不同的主题文件，以下是其中一个：

theme.scss

@import './library-styles-to-be-used-in-app.scss';

:root {
  --primary: #00695c;
  --secondary: #f4f5f6;
}

现在，我将此主题文件导入我的角度应用程序 styles.scss 文件中，如下所示：

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

看到下面的图像，bootstrap css变量已经被覆盖，但是如果我使用btn btn-primary这样的bootstrap类，它仍然显示旧的蓝色。

Answer 1

这是不可能的，因为CSS定制属性和SASS变量是两个分开的东西。

CSS自定义属性可以在运行时通过Javascript进行更改。
另一方面，SASS变量是静态的，它们将被生成，然后在.css-File中被硬编码。例如，SASS的darken()功能获取输入字符串（例如，十六进制值）并输出该十六进制值的变暗版本。

但是bootstrap已经使用CSS自定义属性，所以也许您只是以错误的方式使用它们。也许如果您扩展您想要实现的目标，也许我们可以为您提供更好的帮助。

目前，我们只能给您答案：这是不可能的。

Answer 2

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

存在一个github问题，即将这些表达式从SCSS样式中移出并允许通过单独的变量https://github.com/twbs/bootstrap/issues/31538进行设置，例如您会看到一个PR，该PR显示了在Bootstrap中需要进行哪些更改以及如何为警报组件https://github.com/twbs/bootstrap/pull/31753

启用CSS变量模式

用CSS变量覆盖Bootstrap 4 Sass变量？

2 个答案: