英文:
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";
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论