Bootstrap 4 添加到地图 - 添加额外的主题颜色答案

【问题标题】：Bootstrap 4 Add to map - Adding additional theme-colorBootstrap 4 添加到地图 - 添加额外的主题颜色
【发布时间】：2019-11-15 17:01:37
【问题描述】：

如何在不触及引导变量.scss 的情况下添加自定义的新主题颜色？

请注意，我可以成功更新现有颜色，但无法以同样的方式添加新的主题颜色

文件结构

@import 'custom_variables';
@import './bootstrap/bootstrap'; 
@import './pages/home';

custome_variables.scss

$theme-colors: (
    "primary": #2c67f4, // successfully edited existing color  
    "danger": #ff4136,
    "custom" : "red" // not working when adding new color theme
);

尝试了代码但没有成功

$theme-colors: map-merge(
  (
    "custom":  "red",
  ),
  $theme-colors
);

Reference

【问题讨论】：

标签： html css twitter-bootstrap sass bootstrap-4

【解决方案1】：

你必须先导入变量...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
    "primary": #2c67f4,
    "danger": #ff4136,
    "custom" : red
);

@import "bootstrap";

https://www.codeply.com/go/mdlTSDbmUG

另见：Customizing Bootstrap CSS template

【讨论】：

【解决方案2】：

在处理引导程序更改时，导入顺序至关重要。我更进一步，使用更新的映射为所有颜色创建摘要映射，但无缘无故（就像我想的那样）我的新颜色是主题颜色，它们工作正常，但所有颜色映射只是我的本地更新，所以我必须做的是再次从引导程序导入更新的变量。这是我的资产结构：

_variables.scss

@import "~bootstrap/scss/functions"; // import only required things
@import "~bootstrap/scss/variables";              

$theme-colors: (                                   
    'error': $danger,                              
    'warn': $warning,                              
);                                               

// reimport to use updated mapping, not only local one                                          
@import "~bootstrap/scss/variables";           

$all-colors: () !default;                          
$all-colors: map-merge($all-colors, $theme-colors);
$all-colors: map-merge($all-colors, $colors);      
$all-colors: map-merge($all-colors, $grays);

style.scss

@import 'variables';                  
@import 'exports';                    
@import 'functions';                  
@import '~bootstrap/scss/bootstrap'; 
@import 'custom';

【讨论】：

【解决方案3】：

$theme-colors: (
  "custom-color": #900
);

&lt;button class="btn btn-custom-color"&gt;Sign up free&lt;/button&gt;

试试这个！它对我有用。

【讨论】：