无法覆盖 bootstrap 中的 $theme-color

Question

bootstrap 4.0 SASS

我的 style.scss 文件包含以下代码：

@import "../bootstrap/scss/bootstrap";

@import "colors";
@import "main";

和_colors.scss文件包含以下代码：

$bg-white : white;

$theme-colors: (
        primary: #333333
)

你可以看到我只是想覆盖 $theme-color('primary') 但问题是它什么都不做。

如果我在文件开头移动 @import "colors" style.scss 它会给我以下错误：

error ../bootstrap/scss/_forms.scss (Line 284: $color: null is not a color for `rgba')

实际上，style.scss 文件编译成 style.css 文件，而那个文件是链接文件。

问题： 在使用 SASS 时如何覆盖 bootstrap-4 中的 $theme-color？

如有任何帮助，我们将不胜感激，在此先致谢

干杯。

Answer 1

我假设您已经使用 npm 安装了 Bootstrap 4 beta，并且您希望自定义 Bootstrap SCSS 而无需修改 node_modules.

中的源代码

我的方法是覆盖 variables.scss:

中包含的 Bootstrap 变量

app-styles.scss

// Custom SCSS variables I wish to override (see below)
@import 'assets/styles/variables';

// Bootstrap 4 from node_modules
@import '~bootstrap/scss/bootstrap.scss';

variables.scss

$theme-colors: (
    primary: $trump-hair,
    secondary: $gandalf-hat,
    success: $my-favorite-color,
    info: #FBC02D,
    warning: #FF5722,
    danger: $color-of-melena,
    light: #1B5E20,
    dark: $bile-green
);

覆盖bootstrap主题颜色的方法实际上将在即将到来的beta 2中改变。目前的要求是你必须包括整个theme-colors Sass地图覆盖时。在当前测试版中，未能包含整个 Sass 地图将导致：

Argument $color of darken($color, $amount) must be a color

请参阅此 Github issue and this Codepen 了解更多信息，以及如何在 Beta 2 中覆盖主题颜色的示例。

Answer 2

这也吸引了我。您需要在变量之前将 functions.scss 导入到您的 scss 文件中。

@import '../../node_modules/bootstrap/scss/functions';
@import 'assets/styles/variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

您的路径可能不同。

这是 Bootstrap 4 Beta 1。

Answer 3

2021 年更新 Bootstrap 5

根据 guidance in the docs...

"Variable overrides must come after our functions are imported, but before the rest of the imports."

因此，覆盖 Bootstrap 5 中的主题颜色与 4.x 的工作方式相同。为了覆盖主题颜色，只需在导入之前更改适当的主题颜色变量 bootstrap.scss

/* custom.scss */
/* change theme colors */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
/* end custom.scss */

@import '~bootstrap/scss/bootstrap.scss';

2018 年更新 Bootstrap 4.1

要更改主要或 Bootstrap 4 SASS 中的任何 主题颜色 ，请设置适当的变量 before 导入 bootstrap.scss。这允许您的自定义 scss 覆盖默认值，然后将在所有 theme-colors 循环（btn-primary、bg-primary、text-primary 等）中设置...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: #333333;
);

/* finally, import Bootstrap */
@import '~bootstrap/scss/bootstrap.scss';

演示：https://www.codeply.com/go/lobGxGgfZE

Also see this answer

Answer 4

None 提供的解决方案有效。有些很接近并且会更新大多数元素的颜色使用，但不是所有元素。我已经尝试了所有这些（以及我在 Whosebug 和其他网站上可以找到的所有其他替代方案，但这些解决方案仅影响专门引用颜色属性的元素，不会更新使用 theme-color 函数的元素获取颜色。

预期的解决方案（以及其他人推荐的）是

/* import only the necessary Bootstrap files */
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";

/* -------begin customization-------- */
$colors: (
  "" + blue: #004C9E
);

/* 80 required to bring primary and secondary colors to AAA standards */
$theme-colors: (
  primary: #004C9E
);

// /* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "../../node_modules/bootstrap/scss/bootstrap";

但这会在生成的 custom.css 中留下 15 次 #007bff（正常 blue/primary 颜色）。它的例子出现在分页部分，例如

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

通过在导入 functions.scss 之后同时设置 $colors 和 $theme-colors 自定义属性，并在这些更改出现后放置用于导入 variables.scss 的语句始终设置新颜色。我假设通过专门设置这些变量，bootstrap 变量无法覆盖它们。

@import "../../node_modules/bootstrap/scss/functions";

/* -------begin customization-------- */
$colors: (
  "" + blue: #004C9E
);

/* 80 required to bring primary color to AAA standards */
$theme-colors: (
  primary: #004C9E
);

@import "../../node_modules/bootstrap/scss/variables";

/* put other customization in here */

// /* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "../../node_modules/bootstrap/scss/bootstrap";

这可能看起来不对，但它确实有效。我不是 SASS 专家，所以也许其他人可以更好地解释这一点。我希望这对可能仍在努力解决此问题的任何人有所帮助。

无法覆盖 bootstrap 中的 $theme-color

Unable to override $theme-color in bootstrap

sass

twitter-bootstrap

bootstrap-4

bootstrap-5