无法自定义 Bootstrap 5 主题颜色 [重复]

Question

我正在尝试使用 documentation 之后的 Sass 自定义预定义的 Bootstrap 颜色。

我创建了一个CustomBootstrap.scss 文件，其内容如下：

@import "~bootstrap/scss/bootstrap";

$primary: #2c82c9;

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

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

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

我正在使用 React TypeScript，"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 的新手。