logo标签列表

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

htmlcssangulartwitter-bootstrapsass
6

我正在尝试在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变量？

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

更新

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

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

theme.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的类，它仍然显示旧的蓝色。

Bootstrap CSS Variables

My Theme CSS Variables

你不能这样做，因为CSS属性和Sass变量的工作方式不同。你不能在CSS自定义属性中使用内置的Sass函数darken。它期望一个颜色值并返回一个固定的较暗的颜色值。但是CSS属性不是这样工作的，它们是动态的，可以改变。 - cloned
@cloned 有没有其他的替代方案或解决方法？我在我的应用程序中实现了主题，所以我需要CSS变量。 - Usman Anwar
@UsmanAnwar - 我有完全相同的情况。你找到了任何解决方案吗？ - Nimmi
@Nimmi 不，我必须逐个覆盖所有所需的引导类。如果您能找到解决方案，请在此分享。 - Usman Anwar
@UsmanAnwar 谢谢你的更新，我会尝试并且如果我能找到什么东西，一定会在这里更新。 - Nimmi
2个回答
3
这是不可能的，因为CSS自定义属性和SASS变量是两个不同的东西。CSS自定义属性可以通过Javascript在运行时更改，而SASS变量则是静态的，它们将被生成并成为.css文件中硬编码的值。例如，SASS中的darken()功能接受输入字符串（例如十六进制值）并输出该十六进制值的暗色版本。但是，Bootstrap已经使用了CSS自定义属性，所以也许你只是没有正确使用它们。也许如果您扩展您想要实现的内容，我们可以更好地帮助您。目前我们唯一能给出的答案是：这是不可能的。
我刚刚更新了我的问题，你能看一下吗？ - Usman Anwar
你能再更新一下吗？在你的截图中，它显示你的绿色用于变量。这是在哪里被覆盖的？这个值在最终组件中如何使用？ - cloned
是的，即使绿色用于变量，但如果我使用任何Bootstrap组件，相同的默认蓝色将应用于Bootstrap组件，因此我可以得出结论，Bootstrap未使用CSS变量进行样式设置。 该变量在theme.scss文件中被覆盖，这是更新后的问题。 - Usman Anwar
这完全没有回答我的问题，如果你不想提供更多信息，我无法帮助你。 - cloned
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接