首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >用CSS变量覆盖引导4 Sass变量?

用CSS变量覆盖引导4 Sass变量?
EN

Stack Overflow用户
提问于 2020-03-02 12:24:01
回答 2查看 3.7K关注 0票数 6

我试图在引导4中使用角应用程序中的CSS变量将默认的主Sass变量改写为自定义颜色,如下所示:

styles.scss

代码语言:javascript
复制
:root {
  --primary: #00695c;
}

$myPrimary: var(--primary);

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

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

在编译我的应用程序时,我会得到这个错误:

代码语言:javascript
复制
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变量?

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

更新

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

因此,在我的库中,我有不同的主题文件,下面是其中一个:

theme.scss

代码语言:javascript
复制
@import './library-styles-to-be-used-in-app.scss';

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

现在,我将这个主题文件导入到我的styles.scss文件中,如下所示:

代码语言:javascript
复制
@import '../dist/library/styles/theme.scss';
@import '../node_modules/bootstrap/scss/bootstrap';

参见下面的引导css变量已经被覆盖,但如果我使用引导类如btn btn-primary,它仍然显示旧的蓝色。

EN

回答 2

Stack Overflow用户

发布于 2020-03-02 13:54:03

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

CSS自定义属性可以通过Javascript在运行时更改。

另一方面,SASS变量是静态的,它们将被生成,然后在.css-File中被硬编码。例如,SASS的darken()功能接受输入字符串(例如十六进制值),并输出此十六进制值的深色版本。

但是引导程序已经使用了CSS自定义属性,所以您可能只是以错误的方式使用它们。也许如果你扩大你想要达到的目标,也许我们可以更好地帮助你。

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

票数 3
EN

Stack Overflow用户

发布于 2020-09-28 07:16:31

目前,SCSS文件中的表达式(公式)不允许使用此技术。

有一个github问题,可以将这些表达式从SCSS样式移出并允许通过单独的变量https://github.com/twbs/bootstrap/issues/31538来设置它,例如,您可以看到一个PR,它显示了在引导带中需要进行哪些更改,以及如何为警报组件https://github.com/twbs/bootstrap/pull/31753启用CSS变量模式。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60488806

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档