Блог

Я начинаю новый проект, в котором используются стилизованные компоненты. Я привык к архитектуре в САССЕ, где у меня есть что-то вроде:

 styles
  mixins
    custom-mixin.scss
    ...
    all-mixins.scss
  variables
    colors.scss
    breakpoints.scss
    ...
    all-variables.scss
  mixins-and-variables.scss
 

Обычно я бы импортировал mixins-and-variables.scss в голову своего проекта. Я надеялся изменить это на такой шаблон для моих файлов JS, используя стилизованные компоненты:

 styles
src
  head.js <<< imports mixins-and-variables.scss
 

Это сделало бы мои миксины и переменные глобально доступными для любой таблицы стилей, которую я импортировал под ней, например:

 styles
src
  head.js
  components
    section.js
    section.module.scss <<< can access global variables sourced in head.js
 

Со стилизованными компонентами мне трудно работать с глобальным шаблоном, поскольку каждый компонент ограничен сам по себе. Я хотел бы избежать необходимости импортировать все мои служебные файлы в каждый стилизованный компонент. Есть ли какой-либо способ воспроизвести вышеприведенный шаблон в стиле компонента?

Вы можете использовать/смешивать глобальные стили, темы, литералы шаблонов с тегами (миксины/переменные) и расширять стили для достижения своих целей.