Following this tutorial, I've managed to override Bootstrap 5 default colors in my React application created with create-react-app. Inside my /src/scss/custom.scss I can call any of my new defined variables and use it at will, and even new created classes inside custom.scss are working just fine. Nevertheless, the default Bootstrap classes that use colors (as btn-primary, bg-secondary or text-white) doesn't change at all. When I use btn-primary, for example, the button color is the same old blue color that is the default Bootstrap primary color.
What am I missing?
Make sure you @import Bootstrap after the custom.scss. This will let your changes override the theme color !defaults in Bootstrap variables.scss (referenced in bootstrap.scss).
/* custom.scss */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
$light: #f8f9fa;
$dark: #343a40;
/* end custom.scss */
@import '~bootstrap/scss/bootstrap.scss';
Also, note the article is unnecessarily re-building the theme-colors map which isn't necessary unless you're adding a new theme color variant ie; $accent.