twitter-bootstrap 无法在 bootstrap 4 中覆盖 $theme-color

Unable to override $theme-color in bootstrap 4

提问by Syed Aqeel

It's bootstrap 4.0 with SASS

它是引导程序 4.0 SASS

My style.scssfile contains the following code:

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

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

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

and _colors.scssfile contains the following code:

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

$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.

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

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

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

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

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

Actually, the style.scssfile compiles to style.cssfile and that one is linked file.

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

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

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

Any help will be appreciated, and Thanks in advance

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

Cheers.

干杯。

回答by Zim

Update 2018 for Bootstrap 4.1

Bootstrap 4.1 更新 2018

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

要更改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";

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

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

---

---

Also see this answer

另请参阅此答案

回答by Steve

This got me too. You need to import functions.scss into your scss file before variables.

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

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

Your paths may differ.

您的路径可能有所不同。

This is with Bootstrap 4 Beta 1.

这是 Bootstrap 4 Beta 1。

回答by Phil Mtheitroad

None of the solutions provided work. Some are close and will update the color use on most elements, but not all elements. I have tried them all (and every other alternative I can find on StackOverflow and other websites, but those solutions only affect the elements that are specifically referencing the color property and does not update those using the theme-color function to get the color.

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

The expected solution (and recommended by others) is

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

/* 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";

But this leaves 15 occurences of #007bff (the normal blue/primary color) throughout the generated custom.css. Examples of it occur in the pagination section, e.g.

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

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

By setting both the $colors and the $theme-colors custom properties after the import of the functions.scss, and placing the statement to import the variables.scss AFTER these changes appears to set the new colors throughout. I presume that by setting these variables specifically, the bootstrap variables cannot override them.

通过在导入 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";

The may not seem right, but it does appear to work. I'm not a SASS expert, so maybe someone else could explain this better. I hope this helps anyone who may still be struggling to solve this issue.

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

回答by Blake Mumford

I'm assuming that you have installed Bootstrap 4 betausing npmand you wish to customize the Bootstrap SCSS without modifying the source in node_modules.

我假设您已经安装了Bootstrap 4 betausingnpm并且您希望自定义 Bootstrap SCSS 而不修改node_modules.

The way I do it is by overriding the Bootstrap variables contained in variables.scss:

我这样做的方法是覆盖包含在的 Bootstrap 变量variables.scss：

app-styles.scss

应用样式.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

变量.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
);

The way to override bootstrap theme colors is actually due to be changed in the upcoming beta 2. The current requirement is that you have to include the entire theme-colorsSass map when overriding. In the current beta, failure to include the entire Sass map will result in:

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

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

论证$color的darken($color, $amount)必须是一种颜色

Please see this Github issueand this Codepenfor more information, and an example of how you will be able to override theme colors in beta 2.

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