Dart Sass: загрузите переменные темы в новую систему модулей

Сначала ошибка:

Error: This variable was not declared with !default in the @used module.

Эта ошибка возникает, когда вы пытаетесь @use модуль / файл с переменными конфигурации, но переменные конфигурации не установлены как переменные !default в модуле / файле. Итак, SASS проверяет, передаете ли вы конфигурацию, которая не предназначена для настройки для модуля. Это дополнительная безопасность для вас.

Я не совсем уверен, правильно ли я понял ваш пример, но это может быть так:

// styles/customerA/index.scss

@use "customerA-variables" as variables;
@use "../base/index" with (
  $bgColor: variables.$bgColor,
  $textColor: variables.$textColor
);

--> SASS ERROR because $bgColor and/or $textColor
--> in @used module/file are not set as defaults, i.e.:
--> $bgColor: green;
--> must be: $bgColor: green !default;

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

** ВТОРОЙ: использование @use:

Новое правило @use действительно действительно сбивает с толку ... в вашем примере, который приводит к двойному коду: один раз, когда вы устанавливаете пользовательские переменные в customerA-variables.scss, а затем, когда вы повторяете эти переменные, когда вы @use модуль / файл в styles/customerA/index.scss (см. Ваш второй код пример).

Хороший способ избежать этого двойного кода - подготовить файл конфигурации с настройками для отдельного клиента и ЧЕМ @use файл конфигурации (а не напрямую нужный модуль / файл).

Пример:

// ###
// ### module/file: ../base/index.scss

$bgColor: #eee !default;
$textColor: #333 !default;

body {
  background-color: $bgColor;
  color: $textColor;
}



// ### 
// ### customer configuration file: configModuleCustomerA.scss

@forward "../base/index" with (
  $bgColor: red,
  $textColor: blue
);



// ###
// ### use that configuration file 
// ### to your main file: styles/customerA/index.scss

@use "...path.../configModuleCustomerA" as *;

// Note:
// 1. that writes the configurated css
// 2. and it provides the variables for additional use to THIS file
// see going on this file below ...

.additionalElement {
   background: $bgColor;
   color: $textColor;
}
   
   
// ### 
// ### ---> that compiles to CSS:

body {
  background-color: red;
  color: blue;
} 

.additionalElement {
   background: red;
   color: blue;
}

ПРИМЕЧАНИЕ: вам следует знать об одном дополнительном УРЯДКЕ / ЭФФЕКТЕ.

ВАМ НУЖНО УСТАНОВИТЬ ПЕРЕМЕННЫЕ ТОЛЬКО ОДИН РАЗ ... именно тогда, когда вы настраиваете модуль / файл. И поскольку вы делаете это в файле конфигурации модуля, переменные, которые вы устанавливаете там, становятся частью конфигурации вашего проекта!

Итак, если вам нужны ОДИНАКОВЫЕ переменные модуля второй / третий / ... раз (то есть в дополнительных файлах partials), вы @use этот файл конфигурации в любом файле, где он / они вам нужны. Не волнуйтесь: код css компилируется в ваш CSS только ОДИН РАЗ: при первом запуске модуля @use.

НО ПОДДЕРЖИВАЙТЕ ВАШЕ ДЕЛО:

Но если вы хотите @use модуль / файл с разными конфигурациями, как в вашем случае, вы должны скомпилировать его в два РАЗНЫХ файла CSS. Один модуль с двумя или более различными конфигурациями, загруженными в один и тот же CSS, блокируется SASS. В этом случае вам нужно разделить css на разные клиентские файлы css, которые все используют разные файлы конфигурации модуля.