*_Expected behavior_*I want those lines below(example) working

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

*_Actual behavior_*Actually media-breakpoint-...... can't be found. I've managed to make it working by entering following lines of code

@import "../node_modules/mdbootstrap/scss/core/bootstrap/functions";
@import "../node_modules/mdbootstrap/scss/core/bootstrap/variables";
@import "../node_modules/mdbootstrap/scss/core/colors";
@import "../node_modules/mdbootstrap/scss/core/variables";
@import "../node_modules/mdbootstrap/scss/core/mixins";

But i'm not sure if this is good idea, can it be done in other more professional way?

Resources (screenshots, code snippets etc.)(look above)