Theming Bootstrap 4 - Color-yiq 作为变量覆盖

Question

我想覆盖 bootstrap 个变量但是使用 color-yiq 函数，例如：

$body-bg:     $black;
$body-color:  color-yiq($body-bg);

这是SCSS结构

 // Overrides variables from all sources
@import "variables";

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

// Fonts
@import "../../node_modules/font-awesome/scss/font-awesome";
@import "../../node_modules/material-design-icons-iconfont/src/material-design-icons";

// Plugins
@import "../../node_modules/datatables.net-bs4/css/dataTables.bootstrap4";

// André's Core - Bootstrap improvments
@import "core";

CSS 输出是这样的：

body {
   color: color-yiq(#000);
   text-align: left;
   background-color: #000;
}

使用除 color-yiq 之外的其他功能，如变暗或变亮，有什么帮助吗？

谢谢！

Answer 1

您需要像这样导入 _functions：

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

并且不要忘记（之前）声明所需的变量。例如：

$yiq-text-dark: black !default;
$yiq-text-light: white !default;
$yiq-contrasted-threshold: 150 !default;

Theming Bootstrap 4 - Color-yiq 作为变量覆盖

Theming Bootsrap 4 - Color-yiq as a variable override

sass

theming

twitter-bootstrap

bootstrap-4