In my styles.scss file I have few imports with generic classes and functions:

@import "css/generic.scss";
@import "css/functions.scss";
@import "css/layout.scss";

I'm trying to make those imports work in layers. I've tried the following:

@import "css/generic.scss" layer(utilities);

@layer utilitites {
  @import "css/generic.scss";
}

or wrapping all CSS code in the imports.

Every time I get the same error - that something from functions file is not available to be used later on. Usually it's a mixin defined in functions.scss that is being used in layout.scss but it's not available.

Is there a way to make it work? I'm guessing it's because of the SCSS components like mixins having some kind of scope?