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

问题描述

它是带有SASS

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

My style.scss file contains the following code:

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

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

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

$bg-white : white;

$theme-colors: (
        primary: #333333
)

您可以看到我只是在尝试覆盖$theme-color('primary')，但问题是它什么也没做.

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

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

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

错误../bootstrap/scss/_forms.scss(第284行:$ color:null不是 颜色为"rgba")

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

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

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

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

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

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

Any help will be appreciated, and Thanks in advance

干杯.

推荐答案

Bootstrap 4.1更新2018

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

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

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

也请参见此答案

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