Question

如何在不触及bootstrap variable.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

Answer 1

from bs4 import BeautifulSoup as bs
import requests

r = requests.get('https://offer.ebay.com/ws/eBayISAPI.dll?ViewBidsLogin&item=173653442617&rt=nc&_trksid=p2047675.l2564')
soup = bs(r.content, 'lxml')
#if column # not known
headers = [item.text.strip() for item in soup.select('table[width] th')]
desired_header = 'Date of Purchase'

if desired_header in headers: 
    print([item.text for item in soup.select('table[width] td:nth-of-type(' + str(headers.index(desired_header) + 1) + ')')])

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

试试看！它对我有用。

Answer 2

您必须首先导入变量...

/* 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

Answer 3

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

_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';

Bootstrap 4添加到地图-添加其他主题颜色

3 个答案: