SCSS and @layers - how to make them work together?

Question

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?

Deprave

This answer helped me to make layers work with SCSS, although the difference is that I am using @use rule, so not sure it is the same with @import rules. – Rondeau

Thanks, I'll have a look. I couldn't get @use to work at all :/ – Deprave

Yeah, it took some time for me to figure @use rule and how to use it. I think for the starters you need to make sure you are using dart-sass as I don't think others libs support @use rule. – Rondeau

Ahh okay, that could be the problem. I'm using a PHP repo for Sass and perhaps it's not working there yet as it should – Deprave

Answer 1

With Sass 1.77.4, such code works out of the box:

@layer base, theme;

@layer theme {
  @import "some-file.scss";
}

@layer base {
  @import "some-other-file.scss";
}

You just have to check that @layer base, theme; is on top and load before other css rules

Distrust

Answer 2

My solution was to just compile the generic.css file from the generic.scss and then create a style.css and use it like @import "css/generic.css" layer(utilities);

Substrate