更改标题bg颜色React引导程序

问题描述

尝试使用react bootstrap创建网站，并且无法更改标题的颜色。当前，当我想将其更改为绿色时，它将作为默认的原色显示。

  <header className="bg-primary">
    <Container>
    <Navbar expand="md" variant="dark">
      <Navbar.Brand href="/">{siteTitle}</Navbar.Brand>
      <Navbar.Toggle aria-controls="navbarResponsive" />
      <Navbar.Collapse id="navbarResponsive">
        <Nav as="ul" className="ml-auto">
          <Nav.Item as="li">
            <Link to="/about" className="nav-link" activeClassName="active">About</Link>
          </Nav.Item>
          <Nav.Item as="li">
            <Link to="/projects" className="nav-link" activeClassName="active">Projects</Link>
          </Nav.Item>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
    </Container>
    
  </header>
)

我已经创建了自己的scss文件

// change the theme
$theme-colors: (
  "primary": #44bb88,"danger": #44bb88,);


// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';

我也在我的代码顶部导入了该文件

import '../themes/main.scss';

尽管颜色仍然是默认的蓝色。

解决方法

无法解决问题，但我成功地更改了颜色，方法是将新颜色添加到主题颜色，然后将其设置为bg颜色。

<header className="bg-main">

$theme-colors: (
  "main": #44bb88,"danger": #44bb88,);

react-bootstrap sass