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