can I use my own css var ?

[Benoit-ROBIN]

Hi
can I use my own css variables to customize bootstrap colors in scss files ?

I have a file custom.scss

$white: var(--my-custom-white);
$black: var(--my-custom-black);
$primary: var(--my-custom-primary);
...

@import 'bootstrap/scss/bootstrap'

with this code I have an error

Compiled with problems:X

ERROR in ./src/styles/custom.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/styles/custom.scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--my-custom-white) is not a color.
    ╷
201 │   @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
    │                                                  ^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/bootstrap/scss/_functions.scss 201:50  opaque()
  node_modules/bootstrap/scss/_functions.scss 175:18  contrast-ratio()
  node_modules/bootstrap/scss/_functions.scss 159:22  color-contrast()
  node_modules/bootstrap/scss/_variables.scss 846:42  @import
  node_modules/bootstrap/scss/bootstrap.scss 8:9      @import
  src/styles/custom.scss 123:9                        root stylesheet

My custom css var are loaded in App.js (react app) from a custom lib.
I can see my css var in the browser console.

[julien-deramond]

Hi @Benoit-ROBIN,
For now, it's not really possible to override the value of some colors by setting them to CSS variables because we are still using Sass functions in the core Bootstrap code to calculate some other colors or to find some contrast ratio. This is why you have SassError: $color: var(--my-custom-white) is not a color..
For some colors, it might work, but it depends on what you will override and how.
This is definitely something we'd like to improve in the v6.

[Benoit-ROBIN]

thank you @julien-deramond for your answer 🙏