Можно ли глобально импортировать миксины scss в create react app?

Подскажите пожалуйста, можно ли как-нибудь глобально импортировать библиотеку с миксинами или переменными в приложение create react app НЕ прибегая к eject?

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

.myContainer {
  @include make-container();
  @include make-container-max-widths();
}

.myRow {
  @include make-row();
}
.myCol {
  background-color: yellow;
  @include make-col-ready();
  @include make-col(4);
  @include media-breakpoint-down(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-down(lg) {
    @include make-col(12);
  }
}

Я использую css module для стилей в react и мне хотелось бы иметь доступ к этим миксином в каждом css модуле – не могу найти нормальное решение.

Сейчас делаю так – просто в каждом модуле импортирую эти миксины в самом верху css модуля

@import "./grid/index.scss";

И тогда миксины работают внутри модуля.

Ну, во-первых, это не очень удобно, постоянно импортировать один и тот же файл в модуль – ну это ладно, ерунда.

Но, во-вторых, в таком случае все код этих миксинов дублируется в каждый из css модулей, правда это только в dev режиме, в build код чистый, но все равно – миксины подтягивают кучу стандартного css из библиотеки и вставляют его в каждый и это как-то коробит. Не ужели нет нормального решения такой задачи?

введите сюда описание изображения Хотелось бы один раз указать что нужно импортировать и просто использовать миксины в тех css модулях где это необходимо.


Ответы (0 шт):