Глобальные служебные классы с модулями PostCSS / CSS

Используя CSS-модули, как я могу применить глобальный служебный класс к нескольким элементам без дублирования стиля декларация?

Например, вот компонент React без модулей CSS. Соответствующая строка - это div с двумя классами: widget и _3 _...

/* components/widget.jsx */

class Widget extends Component {
  render() {
    return (
      <div className="widget clearfix">
        <div className="widget-alpha">Alpha</div>
        <div className="widget-beta">Beta</div>
      </div>
    );
  }
}

.clearfix - это глобальный служебный класс, который я хочу применить ко многим элементам моего приложения:

/* util/clearfix.scss */

.clearfix {
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

Я видел различные способы импорта .clearfix в модуль CSS, но в каждом случае объявления стилей переопределяются для каждого случая применения класса. Вот один пример:

/* widget.scss */

.widget {
  // other styles
  composes: clearfix from '../util/clearfix.scss';
}

webpack reactjs css-modules postcss
person cantera    schedule 08.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Методом проб и ошибок я обнаружил, что вы можете объявить :global в селекторе, где используется служебный класс (не там, где он определен):

.widget {

  // other styles

  :global {
    composes: clearfix;
  }
}

Чтобы избежать беспорядочных и повторяющихся операторов import и from, я использовал файл index.scss для импорта служебных файлов, а затем импортировал его в любой части, где требуется служебный класс.

person cantera    schedule 09.12.2015