无法在引导程序中覆盖 $theme-color [英] Unable to override $theme-color in bootstrap

问题描述

这是带有 SASS

的 bootstrap 4.0

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

@import "../bootstrap/scss/bootstrap";@import "颜色";@import "main";

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

$bg-white : 白色;$主题颜色:(初级:#333333)

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

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

<块引用>

error ../bootstrap/scss/_forms.scss(第 284 行:$color: null is not a`rgba' 的颜色)

实际上，style.scss 文件会编译为 style.css 文件，并且该文件是链接文件.

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

任何帮助将不胜感激，并提前致谢

干杯.

解决方案

更新 2021 for Bootstrap 5

根据文档中的指南...

<块引用>

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

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

/* custom.scss *//* 更改主题颜色 */$primary: #362ec4;$secondary: #8f5325;$成功:#3e8d63；$信息:#7854e4；$警告:#b8c924；$危险:#d62518；/* 结束 custom.scss */@import '~bootstrap/scss/bootstrap.scss';

---

针对 Bootstrap 4.1 的 2018 年更新

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

/* 导入必要的 Bootstrap 文件 */@import引导程序/函数"；@import引导程序/变量"；$主题颜色:(主要:#333333；);/* 最后，导入 Bootstrap */@import '~bootstrap/scss/bootstrap.scss';

演示:https://www.codeply.com/go/lobGxGgfZE><小时>

另见此答案

It's bootstrap 4.0 with SASS

My style.scss file contains the following code:

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

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

and _colors.scss file contains the following code:

$bg-white : white;

$theme-colors: (
        primary: #333333
)

You can see that I am just trying to override the $theme-color('primary') but the problem is this that it does nothing.

And If I shift @import "colors" in the start of the file style.scss It gives me following error:

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

Actually, the style.scss file compiles to style.css file and that one is linked file.

Question: How I can override the $theme-color in bootstrap-4 when using SASS?

Any help will be appreciated, and Thanks in advance

Cheers.

解决方案

Update 2021 for Bootstrap 5

Per the guidance in the docs...

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

Therefore, overriding the theme-colors in Bootstrap 5 works the same way as 4.x. In order to override the theme-colors, simply change appropriate theme color variable before importing 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';

---

Update 2018 for Bootstrap 4.1

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the default value, and will then be set in all the theme-colors loops (btn-primary, bg-primary, text-primary, etc..)...

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

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

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

Demo: https://www.codeply.com/go/lobGxGgfZE

---

Also see this answer

这篇关于无法在引导程序中覆盖 $theme-color的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！