Unable to override $theme-color in bootstrap
It's bootstrap 4.0 with SASS
My style.scss file contains the following code:
@import "../bootstrap/scss/bootstrap";
@import "colors";
@import "main";
and _colors.scss file contains the following code:
$bg-white : white;
$theme-colors: (
primary: #333333
)
You can see that I am just trying to override the $theme-color('primary') but the problem is this that it does nothing.
And If I shift @import "colors" in the start of the file style.scss It gives me following error:
error ../bootstrap/scss/_forms.scss (Line 284: $color: null is not a color for `rgba')
Actually, the style.scss file compiles to style.css file and that one is linked file.
Question: How I can override the $theme-color in bootstrap-4 when using SASS?
Any help will be appreciated, and Thanks in advance
Cheers.
Answer
Update 2021 for Bootstrap 5
Per the guidance in the docs...
"Variable overrides must come after our functions are imported, but before the rest of the imports."
Therefore, overriding the theme-colors in Bootstrap 5 works the same way as 4.x. In order to override the theme-colors, simply change appropriate theme color variable before importing bootstrap.scss
/* custom.scss */
/* change theme colors */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
/* end custom.scss */
@import '~bootstrap/scss/bootstrap.scss';
Update 2018 for Bootstrap 4.1
To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the default value, and will then be set in all the theme-colors loops (btn-primary, bg-primary, text-primary, etc..)...
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
$theme-colors: (
primary: #333333;
);
/* finally, import Bootstrap */
@import '~bootstrap/scss/bootstrap.scss';
Demo: https://www.codeply.com/go/lobGxGgfZE