时间戳

首页 > 解决方案 > 用 CSS 变量覆盖 Bootstrap 4 Sass 变量？

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

问题描述

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

样式.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 变量覆盖引导 sass 变量？

还有另一个相关的问题，但我无法解决我的问题。

更新

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

所以在我的图书馆里我有不同的主题文件，下面是其中之一：

主题.scss

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

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

现在，我将这个主题文件导入到我的 Angular 应用程序styles.scss文件中，如下所示：

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

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

引导 CSS 变量

我的主题 CSS 变量

标签： htmlcssangulartwitter-bootstrapsass

解决方案

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

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

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

目前我们能给你的唯一答案是：这是不可能的。

推荐阅读