Почему я получаю неопределенную ошибку переменной при переоценке переменной Bootstrap 5 в SASS? ⇐ CSS

[Anonymous]

Мы начинаем новый проект с помощью Next.js и Bootstrap 5, с SASS. Мы пытаемся создать новую тему, поэтому мы создали файл theme.scss: < /p>
@import '~bootstrap/scss/functions';

$primary: #005EA2;
$secondary: #D83933;

$danger: #D54309;
$success: #00A91C;
$info: #00BDE3;
$warning: #FFBE2E;
$border-radius: 2px;

@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/bootstrap';
< /code>
И это работает просто хорошо. < /p>
Проблема возникает, когда мы пытаемся использовать некоторые переменные для установки семантических цветов, например: < /p>
$primary: $teal;

@import '~bootstrap/scss/variables';
< /code>
В этом случае переменная $ Тил не объявлена: < /p>
5]!./src/app/globals.scss
Undefined variable.
╷
6 │ $primary: $teal;
│ ^^^^^
╵
src\app\theme.scss 6:11 @import
src\app\globals.scss 2:9 root stylesheet
< /code>
Насколько нам известно, импорт переменной должен быть объявлен после переопределения, чтобы применить. Но мы не можем использовать переменные, пока файл переменных не будет импортирован.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... 5-variable