sass 在 bootstrap5 中为 next.js 覆盖默认颜色？

【问题标题】：sass override default colors in bootstrap5 for a next.js?sass 在 bootstrap5 中为 next.js 覆盖默认颜色？
【发布时间】：2021-08-23 18:50:35
【问题描述】：

我已加载引导程序并使用我的 next.js 应用程序。几天来我一直在尝试覆盖默认颜色。

我的 global.scss 文件

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

$primary:#f3ced6;

我知道我的 scss 文件已连接到主 app.js 文件，因为所有样式都有效，包括新的 sass 变量。我只是无法让 sass 覆盖默认颜色。

任何帮助都会很棒！

【问题讨论】：

【解决方案1】：

这里有几件事：

可能是你还没有安装 sass。如果是这种情况，请执行以下操作：

npm install sass

改变这个

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

$primary:#f3ced6;

到

// Custom variables
$primary:#f3ced6;

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

您在导入 Bootstrap 后添加变量。将它们添加到顶部，我通常为此创建一个文件并执行：

// Custom variables
@import "../scss/variables";

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

在 variables.scss 中，您可以像往常一样添加 Bootstrap 变量。

【讨论】：