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

【问题标题】：Theming Bootsrap 4 - Color-yiq as a variable overrideTheming Bootstrap 4 - Color-yiq 作为变量覆盖
【发布时间】：2019-07-17 00:02:35
【问题描述】：

我想覆盖引导变量，但使用 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 之外，使用其他功能，如变暗或变亮，有什么帮助吗？

谢谢！

【问题讨论】：

这工作codeply.com/go/g4LFfVEaIB
谢谢你的回答，我不想那样做，（我之前做过）我只是复制了函数并将它放在引导之前我的“变量”的开头

标签： twitter-bootstrap sass bootstrap-4 theming

【解决方案1】：

你需要像这样导入_functions：

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

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

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

【讨论】：