更改 Bootstrap 4 文本颜色答案

【问题标题】：Change Bootstrap 4 text colors更改 Bootstrap 4 文本颜色
【发布时间】：2019-06-11 03:47:27
【问题描述】：

我正在尝试使用 hackerthemes kit 创建一个简单的深色/倒置 Bootstrap 4 主题（黑色背景、白色文本）并覆盖引导变量 scss。使用$body-bg: black 将背景设置为黑色很简单，但我终其一生都无法弄清楚哪个变量控制文本颜色。
我看到headings-color 默认为inherit，我认为这意味着从一般文本颜色继承，但我找不到它的定义位置。

帮助一个白痴？如何使用 SCSS 在 Bootstrap 4 中设置基本文本颜色？

【问题讨论】：

标签： sass bootstrap-4

【解决方案1】：

覆盖body-color。在 CSS 中，元素的文本颜色是由容易混淆的 color 属性控制的。所以 bootstrap 变量的名字就是由此派生的。

【讨论】：

【解决方案2】：

在与您的引导 scss 文件相同的根文件夹中，创建一个 main.scss 文件。您可以随意调用它：main、site、custom 等。

/* main.scss */

/* import the necessary Bootstrap files */
@import "_functions.scss";
@import "_variables.scss";

/* make changes to the !default Bootstrap variables */
$body-color: #6D2077;  //this is the text color
$body-bg: #F2F5F7; //this is the background color
$input-focus-border-color: #6D2077;

// Typography
//$font-size-base: 12px; // this changes the font-size throughout bootstrap
//$font-family-sans-serif: "Raleway", sans-serif;
//$font-size-base: 1rem;
//$line-height-base: 1.2;

/* here you can change the default colors, for example, text-danger. */
$theme-colors: ( "primary": purple, "danger": orange );

/* finally, import Bootstrap to set the changes! */
@import "bootstrap.scss";

使用 Scss 编译器将 main.scss 代码转换为 main.css。

从您的代码链接到 main.css 文件。

【讨论】：