0

I am trying to customize the predefined Bootstrap colors with Sass following the documentation.

I created a CustomBootstrap.scss file with the following contents:

@import "~bootstrap/scss/bootstrap";

$primary: #2c82c9;

This should normally override the $primary theme color with #2c82c9.

All variables in the $theme-colors map are defined as standalone variables.

But the color stays the same when using it like for example: bg-primary.

I am using React TypeScript, "bootstrap": "^5.0.1", "node-sass": "^6.0.0", other styles work so everything should be imported correctly.

axtck
  • 3,707
  • 2
  • 10
  • 26

1 Answers1

0

The problem was that the variables should be set before the bootstrap import that way it overrides them, I use the following setup now.

I have a _variables.scss file where I keep my override variables and custom variables.

// overrides
$primary: #2191fb;

// custom
$success-light: #57cc99;

In my custombs.scss file I import the variables file and also do the required imports for adding extra custom variables and do the color setting and map merging.

// import custom variables
@import "./variables";

// required imports
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// set custom colors
$custom-colors: (
    "success-light": $success-light,
);

// merge maps
$theme-colors: map-merge($theme-colors, $custom-colors);

I have a styles.scss file for my other styling.

body {
    font-family: "Montserrat", sans-serif;
}

And in my Main.scss I import all the needed files, with bootstrap at last (I believe this is correct).

// font
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Newsreader:wght@200;300;500&display=swap");

// styles
@import "./styles";

// bootstrap customization
@import "./custombs";
@import "~bootstrap/scss/bootstrap";

This way I only need one import in my index file.

import "./styles/Main.scss";

I would like some feedback on this setup, if it is correct, better ways... I am new to scss.

axtck
  • 3,707
  • 2
  • 10
  • 26