How to import globally scss mixins into create react app?

Viewed 531

Please tell me, is it possible to globally import a library with mixins or variables into the create react app without using eject?

I have a grid, let it be a Bootstrap preprocessor grid that gives mixins for generating grid elements - containers, rows and columns, that is, like this:

.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);
  }
}

I use css module for styles in react and I would like to have access to this mixin in every css module - I can’t find a solution.

Now I’m doing this - in each module I import these mixins at the beginning

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

And then the mixins work inside the module.

But the mixin code is duplicated in each of the css modules in dev mode - mixins bring the same code to the tags

style duplicate

Is it possible to specify once what needs to be imported and just use mixins in those css modules where necessary?

0 Answers
Related