CSS-модули в React - решения для обмена кодом многократного использования - PullRequest
Новая
       52

CSS-модули в React - решения для обмена кодом многократного использования

0 голосов
/ 01 ноября 2019

Я переношу глобальный SASS в своем проекте, который представлял собой смесь глобального scss и своего рода настраиваемого загрузочного фреймворка в модули SCSS.

У меня есть ссылка на глобальные стили в приложении, которое требует рефакторинга

enter image description here

Моя цель - совместно использовать стили в модулях CSS для повторного использования тем, кнопок и т. Д. КомпонентыК сожалению, функция модулей CSS не компилирует SASS .

enter image description here

enter image description here

Кажется, это известная проблема:

https://github.com/facebook/create-react-app/issues/7596

Какова была бы лучшая стратегия для быстрой ссылки на общие классы .scss в модулях CSS?

У меня есть main. scss, куда я загружаю файлы, которые используются в приложении во всем мире: 

    :global {
      @import './button';
    }

в sass / _button.scss: 


    .btn {
      font-family: $baseFont;
      font-size: $text--m;
      font-weight: normal;
      text-align: center;
      outline: none;
      white-space: nowrap;
      padding: $padding--xs $padding--m;
      color: var(--white);
      background-color: var(--dark-blue);
      border: 1px solid var(--sky-blue-dark);
      border-radius: 4px;
      transition: all 100ms, color 100ms;
      box-shadow: 2px 3px 6px 0 var(--black-half);
      cursor: pointer;

В моем компоненте Header.jsx 


    <div className={styles.popContainer}>
            <button
              className={`btn ${styles.actionButton}`}
              onClick={toggleActionMenu}
            >
            Click
            </button>
            </div>

Я хочу иметь возможность удалить 'btn' из класса и просто использовать модуль

В моем Header.module.scss 

@import '../../../../styles/buttons.scss';

.header {
}

.actionButton {
  @include btn();
  @include btn__primary();
}

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

...