переопределение переменных в нескольких файлах scss

Question

Если у меня есть такая структура:

|_styles
        |
         ___ _colors.scss
|_components
        |_input
              |_input.tsx
              |_input.scss
        |label
              |_label.tsx
              |_label.scss

, если каждый компонент импортирует файл scss следующим образом:

`import './input.scss';

И каждый файл scss выглядит так:

@import '_colors.scss';

.default {
  color: $label-default-color;
}

Я хочу экспортировать эту библиотеку как пакет и затем иметь возможность задавать переменные по умолчанию в _colors.scss, но как я могу это сделать, если каждый.Файл scss импортирует файл _colors.scss?

Есть ли способ сделать это?

Answer 1

Чтобы переопределить переменную Sass, вы можете просто установить новое значение.

_color.scss:

// DEFAULT LABEL COLOR
// Note: You can use the !default flag to make sure it
// doesn't override custom colors defined in other files
$label-default-color: red !default;

_label.scss:

// OVERRIDE LABEL COLOR
$label-default-color: blue;