Bootstrap Sass : add color to map to work with all components (bg, text, border…)

huangapple go评论62阅读模式
英文:

Bootstrap Sass : add color to map to work with all components (bg, text, border...)

问题

我有一个关于在Bootstrap和Sass中添加新颜色到主题映射的问题。

我做错了什么?

谢谢

我尝试在我的Symfony 6.2应用程序中向Bootstrap框架(v5.2)的主题颜色中添加一个颜色。

它对按钮(.btn-mycolor)有效,但对背景和文本(.bg-mycolor,.text-mycolor)无效。

app.scss:

@import "~bootstrap/scss/bootstrap";
@import "custom";
@import "~bootstrap/scss/bootstrap";

custom.scss:

$custom-theme-colors: (
    "mycolor": #006A4E
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

$utilities-colors: $theme-colors-rgb;

$utilities-text: $utilities-colors;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

$utilities-bg: $utilities-colors;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");

$utilities-border: $utilities-colors;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border");

请注意,代码部分没有翻译。

英文:

I have a problem with Bootstrap and Sass to add new colors to to theme map.

What I'm doing wrong ?

Thanks

I'm trying to add a color to theme-color of bootstrap framework (v5.2) in my Symfony 6.2 app.

It's working with buttons (.btn-mycolor) but doesn't work with background, text (.bg-mycolor, .text-mycolor)....

app.scss :

@import "~bootstrap/scss/bootstrap";
@import "custom";
@import "~bootstrap/scss/bootstrap";

custom.scss:

$custom-theme-colors: (
    "mycolor": #006A4E
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

$utilities-colors: $theme-colors-rgb;

$utilities-text: $utilities-colors;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

$utilities-bg: $utilities-colors;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");

$utilities-border: $utilities-colors;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border");

答案1

得分: 1

app.scss :

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "custom";
@import "~bootstrap/scss/bootstrap";
英文:

Problem resolves !

app.scss :

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "custom";
@import "~bootstrap/scss/bootstrap";

huangapple
  • 本文由 发表于 2023年3月9日 22:47:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/75686183.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定