sass override default colors in bootstrap5 for a next.js?

user_11900568 0
Viewed 314

I have bootstrap loaded and working with my next.js app. I've been trying for days to override the default colors.

my global.scss file

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

$primary:#f3ced6;

I know that my scss file is connected tot he main app.js file, as all the styles work, including the new sass variables. I just can't get sass to override the default colors.

Any help would be great!

bootstrap-4 typescript next.js sass
1 Answers

Couple of things here:

Could be that you haven't installed sass yet. If this is the case do:

npm install sass

Change this

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

$primary:#f3ced6;

to

// Custom variables
$primary:#f3ced6;

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

You're adding variables after importing Bootstrap. Add them to the top, I usually create a file for this and do:

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

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

As well create a file called _variables.scss where you can add your Bootstrap variables as usual.

To edit the colors you can override the theme colors like so:

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

You could change "primary": $primary, to "primary": #f3ced6, or you can use $primary:#f3ced6;(make sure this is at the top).

user_17902440
Related