Error BOOTSTRAP SASS _is not a color for `Darken'

Question

This error returns when I sort these @import files in my app.scss, using SASS/[email protected] on a Mac. I need to understand where the error is, if by reversing the order (custom variables at the end) the error does not happen, and if there is a problem keep this last order (no error):

error Sass/_variable.scss (Line 176: $color: "Theme-color(#007bff)" is not a color for `Darken')

// imports
@import "../sass/variable"; // Bootstrap variables
@import "../node_modules/bootstrap/scss/bootstrap";  // Bootstrap framework
@import "../node_modules/bootstrap/scss/functions";  // Bootstrap Functions - custom

error-free:

// imports
@import "../node_modules/bootstrap/scss/bootstrap";  // Bootstrap framework
@import "../node_modules/bootstrap/scss/functions";  // Bootstrap Functions - custom
@import "../sass/variable"; // Bootstrap variables

Answer 1

Look it is difficult to explain why the mistake without knowing what you did there. But the documentation helps a little to clarify things... You’ve probably changed some Mandatory Key

For example, we use the Primary, Success and Danger keys of the $Theme-Colors map, for links, buttons and form states. Replacing the values of these keys should not present problems, but removing them can cause problems in the Sass build.

Behold: https://getbootstrap.com.br/docs/4.1/getting-started/theming/#keys-bond%C3%B3rias

---

About reversing the order of your variables the indicated would really be they come before as the documentation says, but if you changed the variables directly in variable.scss your problem may be related to what you said earlier about the Keys.

Anyway, in case you have touched this file see that the documentation itself does the @import of variables after the functions

//Partes obrigatórias
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Partes opcionais
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";

Behold: https://getbootstrap.com.br/docs/4.1/getting-started/theming/#importing

Then changing the order may not present unwanted effects. Although I recommend running some tests with some components etc to confirm that the CSS will load as expected...

---

OBS: Also, all Bootstrap variables have the flag !default, this means that you can safely override the value of this variable. Your . scss would look like this: (but in your case may not solve if the value you changed was directly in the Bootstrap default variable)

// Suas sobrescrições de variáveis
$body-bg: #000;
$body-color: #111;

//Partes obrigatórias
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

See more here: https://getbootstrap.com.br/docs/4.1/getting-started/theming/#Vari%C3%A1veis-padr%C3%A3o