无法自定义引导带5主题颜色

Question

我正在尝试自定义预定义的引导带颜色，并在文档之后使用Sass。

我创建了一个具有以下内容的CustomBootstrap.scss文件：

@import "~bootstrap/scss/bootstrap";

$primary: #2c82c9;

这通常应该用#2c82c9覆盖#2c82c9主题颜色。

$theme-colors映射中的所有变量都定义为独立变量。

但是在使用它时，颜色保持不变，例如：bg-primary。

我使用的是React，"bootstrap": "^5.0.1"，"node-sass": "^6.0.0"，其他样式，所以所有的东西都应该正确导入。

Answer 1

问题是，应该在引导import之前设置变量--通过重写它们的方式--我现在使用以下设置。

我有一个_variables.scss文件，其中保存了重写变量和自定义变量。

// overrides
$primary: #2191fb;

// custom
$success-light: #57cc99;

在我的custombs.scss文件中，我导入变量文件，并进行必要的导入以添加额外的自定义变量，并执行颜色设置和映射合并。

// import custom variables
@import "./variables";

// required imports
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// set custom colors
$custom-colors: (
    "success-light": $success-light,
);

// merge maps
$theme-colors: map-merge($theme-colors, $custom-colors);

我有一个styles.scss文件作为我的另一个样式。

body {
    font-family: "Montserrat", sans-serif;
}

在我的Main.scss中，我用引导程序导入所有需要的文件(我相信这是正确的)。

// font
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Newsreader:wght@200;300;500&display=swap");

// styles
@import "./styles";

// bootstrap customization
@import "./custombs";
@import "~bootstrap/scss/bootstrap";

这样，我只需要在我的索引文件中导入一个。

import "./styles/Main.scss";

我想要一些关于这个设置的反馈，如果是正确的，更好的方法.我是scss的新手。