【问题标题】：How to implement Bootstrap 4.5 variables to NextJS correctly?如何正确实现 NextJS 的 Bootstrap 4.5 变量？
【发布时间】：2021-01-03 08:17:40
【问题描述】：

所以我的想法是我想将 Bootstrap 4.5 实现到 NextJS 并使用它，因为我想覆盖这里显示的变量：https://react-bootstrap.github.io/getting-started/introduction/#customize-bootstrap

我的文件结构在 pages 文件夹中： _app.js

import '../styles/main.scss'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

在我刚刚声明的 main.scss 中：

@import 'custom';

在 custom.scss 中我只是复制了 scss>

$theme-colors: (
    "info": tomato,
    "danger": teal
);

$nav-link-color: green;
$h1-font-size: 16px * 22.5;
/* import bootstrap to set changes */
@import "~bootstrap/scss/bootstrap";

无论如何，当我想使用像这样的其他变量时：

$theme-colors: (
    "info": tomato,
    "danger": teal
);

$nav-link-color: $green;

/* import bootstrap to set changes */
@import "~bootstrap/scss/bootstrap";

因为$green已经被bootstrap声明了，我不想重新声明，那么如何正确实现呢？

我也在尝试添加

$nav-link-color: white

例如，但这根本不起作用。有人遇到过这类问题吗？

感谢您的帮助和想法，因为我在 NuxtJS 上也一直在努力解决这个问题，但发现了。但在 NextJS 上，似乎事情进展得并不顺利。我必须一直重新声明东西并声明 BS 变量，然后是我自己的变量，然后再次声明 BS 变量，这似乎有点疯狂。

问候丁字裤

【问题讨论】：

“这根本不起作用”你是什么意思？编译失败？它只是没有显示为白色？
在inspector中不显示也不生效
那么我们需要minimal reproducible example，否则，我们真的无法帮助您查明您缺少什么。
我找到了 $nav-link-color 未生效的原因 - 此变量已弃用。出于某种原因，github 将我引导到旧版本的引导程序。对不起。
我在查看了 repo 后更新了我的答案。

标签： reactjs twitter-bootstrap sass next.js

【解决方案1】：

我找到了$nav-link-color 未生效的原因 - 此变量已被弃用。出于某种原因，github 将我引导到旧版本的引导程序。

你是对的，它存在于 github 上的 main 分支上，但不在你端安装的版本中，虽然该变量没有被弃用，只是还没有发布。 It was added recently 并且可能计划在目前处于 alpha 阶段的 v5 中发布。

原答案

首先，确保 Next.js 项目是 configured correctly to parse SCSS files。这可能包括使用 npm 安装 sass 包，或者为 Next.js 的早期版本（我认为是 8 或 9 之前）安装 @zeit/next-sass。

解决方案 1：从引导程序复制值

$green 尚未定义，因此复制其值并在自定义变量文件中使用它是最简单的解决方案。

$nav-link-color: #198754; // hex value taken from bootstrap variables file

如果 Bootstrap 改变了 $green 的值，应用程序不会受到更新 Bootstrap 的影响，这可以看作是一件好事。

解决方案 2：单独导入每个 Bootstrap 模块

复制 bootstrap.scss 的内容并在其间添加覆盖，以便在需要时从 Bootstrap 变量中受益，但在 Bootstrap 定义其他所有内容（组件、帮助程序等使用变量）之前。

// Any overwrite of Bootstrap variables can go here.
$h1-font-size: 16px * 22.5;

// Or a custom file just so it's cleaner
@import "./custom-variables.scss";

// Configuration
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

// Here, Bootstrap variables can be used and overwritten before
// the components are defined.
$nav-link-color: $green;

// or, again, through a custom file.
@import "./custom-bootstrap-variables.scss";

// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
// ...etc.

// Helpers
@import "~bootstrap/scss/helpers";

// Utilities
@import "~bootstrap/scss/utilities/api";

这种方法的好处是我们可以选择要导入的内容，它可以减少编译后的 CSS 文件的总大小。

【讨论】：