Tests fail due to missing SCSS variable for bootstrap ($primary-text-emphasis-dark)

[sypets]

Bug Report

Description

Build/Scripts/runTests.sh -s buildCss

Running "sass:styleguide" (sass) task
Fatal error: Error: Undefined variable.
   ╷
55 │     "primary": $primary-text-emphasis-dark,
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/bootstrap/scss/_maps.scss 55:16  @import
  Resources/Private/Styles/frontend.scss 4:9    root stylesheet

see https://github.com/TYPO3/styleguide/actions/runs/5162150336/jobs/9299646677#step:15:38

see also https://github.com/orgs/community/discussions/16109

Steps to Reproduce

irrelevant, see failing actions.

Solution

I am neither a SCSS nor bootstrap expert, but the problem goes away if adding this to frontend.scss:

@import "../../../node_modules/bootstrap/scss/_variables-dark"; I will try to research what is the best solution here.

[sypets]

Followup: Bootstrap comes with dark-mode enabled (via $enable-dark-mode variable) by default. You can either turn off darkmode entirely or import the _variables-dark.scss or create your own custom variables-dark.scss or ...?

Since there are probably other changes necessary to fully support darkmode, I propose to disable it for now.

$enable-dark-mode: false;

see

• Stack Overflow: https://stackoverflow.com/questions/75873195/getting-primary-primary-text-emphasis-dark-error-while-converting-scss-to-cs
• bootstrap: https://getbootstrap.com/docs/5.3/customize/color-modes/#building-with-sass