Ошибка Sass @use неопределенной переменной, несмотря на правильный порядок импорта ⇐ CSS

[Anonymous]

Я сталкиваюсь с постоянной ошибкой неопределенной переменной при использовании новой системы модулей Sass (

Код: Выделить всё

@use). Моя установка включает в себя модульную файловую структуру, в которой переменные импортируются перед их использованием, но компилятор продолжает давать сбой.
Ошибка: $font-family

не определен в _typography.scss.
1. Структура файла
Мои основные файлы SCSS организованы следующим образом:

Код: Выделить всё

styles/
├── base/
│   ├── _variables.scss   // Defines $font-family
│   └── _typography.scss  // Uses $font-family
└── main.scss             // The manifest file

2. Вывод ошибки
Компилятор ясно показывает, что ошибка возникает в _typography.scss, и указывает на строку импорта в main.scss:

Код: Выделить всё

Error: Undefined variable.
  ╷
4 │   font-family: $font-family;
  │                ^^^^^^^^^^^^
  ╵
  styles\base\_typography.scss 4:16  @use
  styles\main.scss 6:1               root stylesheet

3. Содержимое кода
Я проверял порядок импорта в main.scss несколько раз, гарантируя, что переменные загружаются первыми:

Код: Выделить всё

styles/main.scss

[/b]
SCSS

Код: Выделить всё

@use 'base/variables' as *; // Line 1
@use 'base/mixins' as *;

// 3. BASE GERAL
@use 'base/global';        
@use 'base/typography';     // Line 6 (where the error is reported)

// 4. COMPONENTS/LAYOUTS
@use 'components/header';
@use 'components/footer';
@use 'components/layout';

// 5. PÁGINAS
@use 'pages/home';
@use 'pages/services';
@use 'pages/about';
@use 'pages/contact';

Код: Выделить всё

styles/base/_typography.scss

[/b] (Файл, в котором сообщается об ошибке)
SCSS

Код: Выделить всё

// Problematic code on line 4:
body {
font-family: $font-family;
// ... other styles
}

Код: Выделить всё

styles/base/_variables.scss

[/b] (переменная четко определена)
SCSS

Код: Выделить всё

$font-family: 'Elms Sans', sans-serif;
$header-bg: lightgreen;
$spacing-sm: 12px;
$logo-width: 93px;
$small-logo: 50px;
$max-width: 1200px;
$radius: 8px;
$color-dark-green: darkgreen;

Вопрос: Почему Sass не распознает $font-family, когда _variables.scss импортируется до _typography.scss с правильным синтаксисом *? Существуют ли какие-либо распространенные проблемы окружающей среды (например, символы спецификации или кеш компилятора), которые могут вызвать это, несмотря на правильную структуру кода?

Подробнее здесь: https://stackoverflow.com/questions/798 ... port-order