无法在bootstrap 4中覆盖$ 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它给我以下错误:

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

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

问题:如何$theme-color在bootstrap-4使用时覆盖输入SASS？

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

干杯.

Answer 1

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

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

另见这个答案

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

没有一个解决方案提供工作。有些接近，将更新大多数元素的颜色使用，但不是所有元素。我已经尝试了所有（以及我可以在 StackOverflow 和其他网站上找到的所有其他替代方案，但这些解决方案仅影响专门引用 color 属性的元素，并且不会更新那些使用 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（正常的蓝色/原色）。它的例子出现在分页部分，例如

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