1

I am making a custom Bootstrap theme. This is my setup in style.scss:

// Custom variables
@import 'custom-variables';

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/images";

// Module imports
@import 'modules/contact-blok';

In my custom-variables.scss file I want to use:

$headings-color:              $gray-700;

But then I get an error during compiling:

Error: Undefined variable: "$gray-700".

What do I have to do so I am able to use Bootstrap variables in my custom-variables file?

meez
  • 3,783
  • 5
  • 37
  • 91
  • the SASS compiler doesn't know what `$gray-700;` is ... it's defined in `bootstrap/variables` so you *must* import the `// Required` imports *before* `@import 'custom-variables';` – Carol Skelly Jan 15 '19 at 12:21

1 Answers1

2

You need to import the file with the variables to custom-variables.scss. In other words, the fact that you imported this variable in the root file, doesn't mean that custom-variables.scss knows about it.

An alternative approach is to use CSS variables.

Eliya Cohen
  • 10,716
  • 13
  • 59
  • 116
  • I import `@import "../node_modules/bootstrap/scss/variables";` on top of my `custom-variables.scss` but then I get another error `Error: $color: 'theme-color("primary")' is not a color for `darken' on line 171 of node_modules/bootstrap/scss/_variables.scss`. Its looks like it can't find related $variables to `_variables.scss`? How can I fix this? – meez Jan 16 '19 at 07:32
  • 1
    It happens because you need to import the functions as well https://github.com/twbs/bootstrap/issues/23313 – Eliya Cohen Jan 16 '19 at 08:43