Question

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

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

@import "~bootstrap/scss/bootstrap";

$primary: #2c82c9;

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

<块引用>

$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 的新手。

无法自定义 Bootstrap 5 主题颜色

1 个答案: