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

如何在不接触bootstrap variable.scss的情况下添加自定义的新主题颜色

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

文件结构

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

自定义变量.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
);

$主题颜色：(
“定制颜色”：#900
);
免费注册
您必须首先导入变量

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

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

@import "bootstrap";


另请参见：
在处理引导更改时，导入顺序至关重要。我更进一步，使用更新的映射为所有颜色创建摘要映射，但是没有任何原因（就像我想的那样）我的新颜色是主题颜色，它们工作正常，但是所有颜色映射只有我的本地更新，所以我要做的是再次从引导导入更新的变量。以下是我的资产结构：

_变量.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';