Bootstrap 5 的按钮文本是黑色而不是像他们的演示那样的白色

Question

我不确定这是否是我在安装 Bootstrap 5 时做错的，但是我的很多按钮都使用黑色字体而不是 [=19= 上看到的白色字体]

例如，Bootstrap 文档中的 .btn-primary 如下所示：

然而，当我使用相同的 HTML 时，结果是：

作为参考，他们的示例和我的示例中的 HTML 是：

<button type="button" class="btn btn-primary">Primary</button>

不仅文字颜色不同，背景颜色也不同。事实上，通过我编译的 .css 文件，整个代码中使用的 bootstrap 颜色中有很大一部分具有与按钮中的蓝色相似的“褪色”外观。从 Chrome 开发工具来看，样式似乎来自 Bootstrap 文件本身，而不是我无意中应用的任何样式。 SCSS 正在通过正常的 Laravel 设置（webpack mix）编译为 CSS 文件。我只是为 bootstrap 5.

使用 NPM 包

window.bootstrap = require('bootstrap'); 和 NPM 包 "bootstrap": "^5.1.3",

我的 app.scss 文件里面没有太多内容：

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import "~bootstrap-icons/font/bootstrap-icons";

// "Lobster" Font for H1's
@import "https://fonts.googleapis.com/css2?family=Cuprum&family=Lobster&display=swap";

// Flatpickr Styles
@import "~flatpickr/dist/flatpickr.min.css";

// Font Awesome Free
@import "~@fortawesome/fontawesome-free/css/all.min.css";

// DataTables Styles
@import "~datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "~datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css";

h1 {
    font-family: 'Lobster', cursive;
}

a.torn-link {
    color: $orange;
}

.ttt-title {
    font-family: 'Lobster', cursive;
}
.card-title {
    font-family: 'Cuprum', sans-serif;
}
html {
    background-color: #fff;
    color: #636b6f;
}
body {
    background-color: #fff;
    color: #636b6f;
}
.links {
    >a {
        color: #636b6f;
        padding: 0 25px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .1rem;
        text-decoration: none;
        text-transform: uppercase;
    }
}
#settings-button {
    &:hover {
        fill: rgba(189, 189, 189, 0.25);
    }
}
.ui-dialog-title {
    font-family: 'Cuprum', sans-serif;
}

thead, th {
    text-align: center;
}

编辑： 甚至所有 Bootstrap 彩色链接似乎都被冲掉了。例如，.link-warning 黄色无法使用，因为颜色太褪色了，无法阅读。而他们页面上的黄色是完全可读的。所以这甚至不是我不小心将样式应用于按钮或其他东西。

编辑2：

这是我的按钮在开发工具中的样子（注意颜色不同于 Bootstrap 5 文档颜色

而按钮 CSS 只是来自通过 webpack 生成的已编译 app.css 文件：

编辑 3：我的 _variables.scss 文件：

// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

Answer 1

在 _variables.scss 文件中的某个时刻，将 Bootstrap 5 添加到 Laravel 8 中，其中一个脚本似乎添加了颜色，或者我在某个时刻搞砸了并添加了一个颜色托盘到变量文件中。

变量文件中的所有颜色都与 Bootstrap 默认颜色相似，但是是更褪色的版本。这就是导致 Bootstrap 中使用这些变量的任何内容都显得过时的原因。

只需删除我在 _variables.scss 文件中定义的所有颜色即可解决问题。

Answer 2

感谢您的回答 ComputerLocus，我遇到了同样的问题。由于声誉原因我无法添加评论我会写这个答案。

所述的解决方案是正确的。更详细地说，您需要访问可以在 resources/sass/ 中找到的 _variables.scss。删除冲突声明的颜色后，您需要在主项目目录内的终端中运行 npm run dev 。如果更改仍未显示，请使用 ctrl + F5.

刷新您的页面

就这些了，伙计们:)

Bootstrap 5 的按钮文本是黑色而不是像他们的演示那样的白色

Bootstrap 5's Button Text is Black Instead of White Like their Demo

javascript

css

twitter-bootstrap

bootstrap-5

laravel-8