Sass: @use приводит к ошибке, неопределенная переменная

Question

В моей папке stylesheets есть файл main.scss в который импортируются все стили через @use!

@charset "UTF-8";

// 1. Vendors
@use 'vendors/reset';

// 2. Base stuff
@use 'base/base';
@use 'base/fonts';

// 3. Layout-related sections
@use 'layout/header';
@use 'layout/footer';

// 4. Components

// 5. Pages
@use 'pages/home';

// 6. Themes

И компилируются в файл main.css в папке css, но не могу понять почему в процессе компиляции программа, отказывается от файла _base.scss в которой сейчас лежат переменные, с цветами.

// COLORS
$black: #121214;
$white: #FFFFFF;
$light_gray: #8C8F96;
$dark_gray: #303030;
$blue: #49D0FF;

и выдает ошибку компиляции

Compilation Error
Error: Undefined variable.
   ╷
10 │     background: $black;
   │                 ^^^^^^

по переменной которую я указал в файле _header.scss

.header {
  display: flex;
  height: clamp(80px, 10vw + 60px, 100px);
  background: $black;
}

Пробовал:

в самом файле _header.scss тоже прописывать @use '../base/base';
в файле main.scss прописывать @use 'base/base' as b; и обращаться в _header.scss к background: b.$black;.. в таком случае он вообще говорит что не существует модуля с именем "b".
@use 'base/base' as *; тоже не помогает.
находил вопрос с похожей проблемой, там проблема была в старом Live Sass Compiler, я проверил, у меня установлен новый.

Работает только есть в файле _header.scss прописать @import '../base/base';, но тогда и main.scss не нужен...

Прошу помощи, укажите, что я делаю не так...

Прикладываю ссылку с полной структурой приложения: https://codesandbox.io/p/github/KitVitalevich/XWEAR/main?file=%2Fstylesheets%2Fmain.scss%3A11%2C22 !

Answer 1

Правило @use используется для работы с модулями. Обращение к переменным, функциям или миксинам будет осуществляться через namespace.

Полученные переменные не проваливаются внутрь других модулей, так как не импортируются глобально.

Несколько вариантов решения:

Использовать @use внутри всех модулей где нужны переменные и т.д. и обращаться к ним через namespace
Использовать возможность конфигурирования модулей
```
@use 'base/base' as b;
@use 'layout/header' with (
    $black: b.$black
);
```
использование @use внутри всех модулей где нужны переменные без указания namespace при использовании @use "<url>" as *

БЛОГ НА HUSL

Sass: @use приводит к ошибке, неопределенная переменная

Ответы (1 шт):