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
Is it possible to specify once what needs to be imported and just use mixins in those css modules where necessary?