How to implement Bootstrap 4.5 variables to NextJS correctly?

user_10191235 0
Viewed 1634

So my idea is that i want to implement Bootstrap 4.5 to NextJS and use it as i want to override variables as show in here: https://react-bootstrap.github.io/getting-started/introduction/#customize-bootstrap

The file structure i'm having is in pages folder: _app.js

import '../styles/main.scss'

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

export default MyApp

in main.scss i just declared:

@import 'custom';

And in custom.scss i just copied 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";

Anyway when i want to use other variables like this:

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

$nav-link-color: $green;

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

because $green is already declared by bootstrap and I don't want to redeclare it, then how is it correct to implement it?

Also i'm trying to add

$nav-link-color: white

For example but this doesn't work at all. Anyone had these kind of issues?

Thanks for help and ideas since i've been struggling with this on NuxtJS as well but there found out. But on NextJS it seems that things are not working out so well. It seems little bit crazy that i have to redeclare stuff all the time and also to declare BS variables, then my own variables and then BS variables again.

Regards Teet

twitter-bootstrap next.js reactjs sass
1 Answers

I found the cause for $nav-link-color for not taking an effect - this variable is deprecated. For some reason, github directed me to the older version of bootstrap.

You're right in that it's present on the main branch on github but not in the version installed on your end, though the variable is not deprecated, it just wasn't released yet. It was added recently and is probably planned for a release in the v5 which is in alpha right now.

Original answer

First, make sure the Next.js project is configured correctly to parse SCSS files. This may include installing the sass package with npm, or @zeit/next-sass for earlier versions of Next.js (before 8 or 9 I think).

Solution 1: Copy the value from bootstrap

$green is not defined yet so copying its value and using it inside a custom variables file is the simplest solution.

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

If Bootstrap ever changes the value of $green, the app isn't going to be affected by updating Bootstrap, which can be seen as a good thing.

Solution 2: Import each Bootstrap module individually

Copy the content of bootstrap.scss and add overwrites in-between, so that it benefits from Bootstrap variables if ever needed, but before Bootstrap defines everything else (components, helpers, etc which uses the variables).

// 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";

What's great with this approach is that we can choose what to import and it reduces the total compiled CSS file size.

user_12189800
Related