How to override primary color in bootstrap in variable.scss?

Question

Bootstrap

I override the colors from _variables.scss in bootstrap, I need to replace $blue with my own. Accordingly, in my variables.scss I change $blue: #a3ccee; and all is well, all colors in the template have changed, except for the color of links and primary buttons. I climb into the source, find the only place where the $primary variable is set , add it to my variables.scss (which overrides the original _variables.scss ). Nothing happens. Tell me where to change all the colors of $primary

Answer 1

Try like this.

// custom.scss
$blue: #2C3E50;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #E74C3C;
$orange: #fd7e14;
$yellow: #F39C12;
$green: #18BC9C;
$teal: #20c997;
$cyan: #3498DB;
$white: #fff;
$gray: #95a5a6;
$gray-dark: #343a40;
$primary: #2C3E50;
$secondary: #95a5a6;
$success: #18BC9C;
$info: #3498DB;
$warning: #F39C12;
$danger: #E74C3C;
$light: #ecf0f1;
$dark: #7b8a8b;
$breakpoint-xs: 0;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;


$navbar-height: 56px + 18px;
$footer-heigth: 80px;

@import '_html.scss';
@import '_header.scss';
@import '_person.scss';
@import '_about.scss';
@import '_feedback.scss';
@import '_footer.scss';
@import '_sharer.scss';
@import '_signin.scss';

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';