如何正确地将Bootstrap 4.5变量实现为NextJS？

编程问答 2022-07-24

问题描述

所以我的想法是我想将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已由引导程序声明，并且我不想重新声明它，那么实现它的正确性如何？

我也在尝试添加

$nav-link-color: white

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

感谢我的帮助和想法，因为我也在NuxtJS上进行了努力，但是发现了。但是在NextJS上，似乎效果不佳。我不得不一直重新声明东西，并声明BS变量，然后声明我自己的变量，然后再次声明BS变量，这似乎有点疯狂。

问候 Teet

解决方法

我发现$nav-link-color不起作用的原因-不建议使用此变量。出于某种原因，github指导我使用了较早版本的bootstrap。

您说对了，因为它存在于github上的main分支上，但没有出现在您最终安装的版本中，尽管该变量尚未弃用，但尚未发布。 It was added recently，并且可能已计划在当前处于Alpha版的v5中发布。

原始答案

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

解决方案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编译文件的总大小。

reactjsreactjssasstwitter-bootstrap