I'm trying to create a custom build of Bootstrap 4. Among other things, I want to change the default colour ("primary") from Bootstrap Blue to something else.
If I edit the Bootstrap source files directly, and add my new colour to the list of standard colours, and set "primary" to my new colour, and re-build, it all works as I would expect, and all the components pick up my new colour as their default, and it correctly calculates lighter and darker variants.
But I'm aware that this isn't really the correct way to do it. So I tried using the untouched Bootstrap source files, and created a custom.scss file like this
@import "functions";
@import "variables";
@import "mixins";
$newcolor: #00a89c;
$colors: (
"newcolor": $newcolor
);
$primary: $newcolor;
$theme-colors: (
"primary": $primary
);
@import "bootstrap";
When I rebuild, the results are different. The compiled CSS includes the new colour, and some components (e.g. btn-primary, badge-primary, bg-primary) have picked it up, but other elements (e.g. btn-link) have reverted back to Bootstrap Blue. I checked the Bootstrap source, and btn-link is set to $link-color, and $link-color comes from theme-color("primary"), so I think I must be doing something in the wrong order, or misunderstanding what takes precedence.
Can somebody spot where I've gone wrong, and tell me how to get my new colour to be used everywhere that "primary" is referenced?
You got it partially right by using @import "bootstrap" at the very end.
What wasn't correct was @importing functions, variables, and mixins at the very top when @import bootstrap.scss already contains the @imports for them.
What's essentially happening here is that your @import "mixins" at the top of your file only sees what came before it (the default functions and variables file) and that was before you provided your own values further down.
custom.scss
$newcolor: #00a89c;
$colors: (
"newcolor": $newcolor
);
$primary: $newcolor;
$theme-colors: (
"primary": $primary
);
@import "bootstrap";