无法在引导程序中覆盖 $theme-color

Posted 2023-03-05

【中文标题】无法在引导程序中覆盖 $theme-color

【英文标题】：Unable to override $theme-color in bootstrap

【发布时间】：2018-02-22 07:53:39

【问题描述】：

它是带有 SASS 的 bootstrap 4.0

我的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 的开头，则会出现以下错误：

错误 ../bootstrap/scss/_forms.scss（第 284 行：$color: null 不是 `rgba' 的颜色）

其实style.scss文件编译成style.css文件，就是链接文件。

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

任何帮助将不胜感激，并在此先感谢

干杯。

【问题讨论】：

好问题，同样的问题也可以这样命名：Argument $color of darken($color, $amount) must be a color

【参考方案1】：

我假设您已经使用npm 安装了Bootstrap 4 beta，并且您希望在不修改node_modules 中的源代码的情况下自定义Bootstrap SCSS。

我这样做的方法是覆盖 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
);

覆盖引导主题颜色的方式实际上将在即将到来的 beta 2 中进行更改。当前的要求是覆盖时必须包含整个 theme-colors Sass 映射。在当前测试版中，未能包含整个 Sass 映射将导致：

darken($color, $amount) 的参数 $color 必须是颜色

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

【讨论】：

获取这些值的正确方法是什么？我在 bootstrap scss 文件中看到了 theme-colors('blue') ，但出现错误..

它只是一个 Sass 地图：map-get($theme-colors, primary)

【参考方案2】：

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

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

您的路径可能不同。

这是 Bootstrap 4 Beta 1。

【讨论】：

这也是我为自己找到的答案。如果没有上述变量的函数，它不会正确编译theme-color("primary")，因为函数内部有一个名为theme-color 的函数。

Confirmed 目前似乎不起作用。事实上，当我尝试这个时，它仍然会抛出错误。

【参考方案3】：

Bootstrap 5 更新 2021

根据guidance in the docs...

“变量覆盖必须在我们的函数被导入之后出现，但是 在其余导入之前。”

因此，在 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 中的 主要 或任何 主题颜色，请在导入 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

【讨论】：

我已经用最新的 v4.1.2 尝试过这个。但是，我收到错误Error: File to import not found or unreadable: utilities/screenreaders. 我该如何解决？谢谢。

@HDP 不要导入函数和变量，而是这样做@import "~bootstrap/scss/bootstrap-reboot";

@MichaelCzechowski - 这也有效，但它也添加了对于主题颜色自定义来说不必要的混合。

有点遗憾，bootstrap 没有为实现自定义提供简单的指南。 @Zim 你是对的。现在我改变了我的方法。

我认为您需要删除#333333之后的分号。为我抛出一个错误。

【参考方案4】：

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

预期的解决方案（并由其他人推荐）是

/* 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（正常的蓝色/原色）。它的例子出现在分页部分，例如

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

通过在导入 functions.scss 之后设置 $colors 和 $theme-colors 自定义属性，并在这些更改之后放置用于导入 variables.scss 的语句，似乎可以在整个过程中设置新颜色。我假设通过专门设置这些变量，引导变量无法覆盖它们。

@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 专家，所以也许其他人可以更好地解释这一点。我希望这对可能仍在努力解决此问题的任何人有所帮助。