Почему SCS говорят, что переменная не определена, хотя переменная уже была определена? ⇐ CSS

[Anonymous]

Я мигрировал код SCSS из предыдущего правила @Import в правило @Forward и @USE, и я столкнулся с ошибкой. И, выполняя конверсию, я сталкиваюсь с проблемой, которая выплевывает некоторую ошибку. Ошибка можно увидеть ниже после окончания кода. < /P>
В этом проекте я управлял файлами таким образом. < /P>
style
abstract
__index.scss
_color.scss
_variable.scss
components
__index.scss
_button.scss
style.css
style.css.map
style.scss
< /code>
Код вместе с именем файлов можно найти здесь. < /p>
// File: abstract/__index.scss

@forward "color";
@forward "variable";

// File: abstract/_color.scss
$color_m-dynamic--hue: 0;
$color_m-dynamic--saturation: 0%;
$color_m-dynamic-lightness: 50%;
$color_m-dynamic-transparent: transparent;

@media (prefers-color_scheme: light) {
$color_m-dynamic-45: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 45%);
$color_m-dynamic-50: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 50%);
$color_m-dynamic-55: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 55%);
}

@media (prefers-color_scheme: dark) {
$color_m-dynamic-45: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 55%);
$color_m-dynamic-50: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 50%);
$color_m-dynamic-55: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 45%);
$color_m-dynamic-60: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 40%);
}

// File: component/__index.scss

@forward "button";

// File: component/__index.scss

@use "../abstract/_index" as abstract;
.button {
height: 48px;
max-height: 44px;
min-width: 48px;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: none;
border-radius: 24px; //rounded 24, edged 0, pill 4
padding-left: 20px;
padding-right: 20px;
gap: 8px;

&--solid {
border: none;
color: abstract.$color_m-dynamic-50;
background-color: abstract.$color_m-dynamic-50;
transition: all 600ms ease;

&:hover {
border: none;
color: abstract.$color_m-dynamic-99;
background-color: abstract.$color_m-dynamic-40;
}
}
}
< /code>
Теперь я ожидал, что этот код будет работать, я искал наиболее возможные источники того, почему я получил ошибку, но не смог найти никакой ошибки. < /p>
The following are the errors I got:
Compilation Error
Error: Undefined variable.
╷
22 │ color: abstract.$color_m-dynamic-50;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
c:\Codebase\NeupDesign\style\component\_button.scss 22:16 @forward
c:\Codebase\NeupDesign\style\component\__index.scss 2:1 @use
c:\Codebase\NeupDesign\style\index.scss 3:1 root stylesheet
< /code>
Я на самом деле не имею никакого представления о том, где я мог бы совершать ошибки. Если кто -то может помочь мне, это было бы действительно замечательным для меня. < /P>
Спасибо за это. *;
, а затем удалил переменную расстояния между именами, чтобы проверить, будет ли она работать, но я получил ту же ошибку Agian. /> Следующее не генерирует никакой ошибки, но это происходит. < /p>
@use "abstract/_index" as abstract;
@use "component/_index" as component;
< /code>
Добавление второй строки кода обеспечивает ту же ошибку. Я попробовал @USE "Foundation/__ Index" и @USE "Abstract/__ Index", и то же самое происходит, поэтому я не думаю, что это связано с неправильным именом файла.$color_m-dynamic--hue: 0;
$color_m-dynamic--saturation: 0%;
$color_m-dynamic-lightness: 50%;
$color_m-dynamic-transparent: transparent;

@media (prefers-color_scheme: light) {
$color_m-dynamic-0: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 0%);
$color_m-dynamic-1: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 1%);
$color_m-dynamic-2: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 2%);
$color_m-dynamic-3: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 3%);
$color_m-dynamic-4: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 4%);
$color_m-dynamic-5: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 5%);
$color_m-dynamic-10: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 10%);
$color_m-dynamic-15: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 15%);
$color_m-dynamic-20: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 20%);
$color_m-dynamic-25: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 25%);
$color_m-dynamic-30: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 30%);
$color_m-dynamic-35: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 35%);
$color_m-dynamic-40: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 40%);
$color_m-dynamic-45: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 45%);
$color_m-dynamic-50: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 50%);
$color_m-dynamic-55: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 55%);
$color_m-dynamic-60: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 60%);
$color_m-dynamic-65: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 65%);
$color_m-dynamic-70: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 70%);
$color_m-dynamic-75: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 75%);
$color_m-dynamic-80: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 80%);
$color_m-dynamic-85: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 85%);
$color_m-dynamic-90: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 90%);
$color_m-dynamic-95: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 95%);
$color_m-dynamic-96: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 96%);
$color_m-dynamic-97: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 97%);
$color_m-dynamic-98: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 98%);
$color_m-dynamic-99: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 99%);
$color_m-dynamic-100: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 100%);
}

@media (prefers-color_scheme: dark) {
$color_m-dynamic-0: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 100%);
$color_m-dynamic-1: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 99%);
$color_m-dynamic-2: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 98%);
$color_m-dynamic-3: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 97%);
$color_m-dynamic-4: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 96%);
$color_m-dynamic-5: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 95%);
$color_m-dynamic-10: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 90%);
$color_m-dynamic-15: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 85%);
$color_m-dynamic-20: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 80%);
$color_m-dynamic-25: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 75%);
$color_m-dynamic-30: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 70%);
$color_m-dynamic-35: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 65%);
$color_m-dynamic-40: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 60%);
$color_m-dynamic-45: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 55%);
$color_m-dynamic-50: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 50%);
$color_m-dynamic-55: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 45%);
$color_m-dynamic-60: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 40%);
$color_m-dynamic-65: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 35%);
$color_m-dynamic-70: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 30%);
$color_m-dynamic-75: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 25%);
$color_m-dynamic-80: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 20%);
$color_m-dynamic-85: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 15%);
$color_m-dynamic-90: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 10%);
$color_m-dynamic-95: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 5%);
$color_m-dynamic-96: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 4%);
$color_m-dynamic-97: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 3%);
$color_m-dynamic-98: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 2%);
$color_m-dynamic-99: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 1%);
$color_m-dynamic-100: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 0%);
}
< /code>
Здесь ни одна из переменной не создается. Я не знаю почему, но это то, что происходит. Если я удаляю медиа -запросы, переменные создаются автоматически.

Подробнее здесь: https://stackoverflow.com/questions/757 ... ble-has-be