SCSS @use vs CSS @layer Problems.... plz fixed.. this issues..

[rebehayan]

While using CSS's @layer in scss,
I found that it did not work in files that had to be compiled at the top level.

The contents of my compiled file are as follows.

//style.scss
@layer reset, components, utility;
@use 'components';
@use 'pages';

The problem in that code is
@use must be at the top of the code
This problem seems to have arisen because it is similar to the @layer concept in CSS.

Is there a way to fix this problem or can it be fixed in a future update?

---

I wrote this issue through a translator.
Some expressions may be strange.

[nex3]

We generally recommend wrapping partials in mixins, so that instead of having your @use rules emit styles as a side-effect you can choose exactly where and when they're emitted. For example:

@use 'components';
@use 'pages';

@layer reset, components, utility;

@include components.styles;
@include pages.styles;

That said, we should probably move the @layer rule to the top of the output stylesheet as we do for plain-CSS @import so that this pattern is possible without forcing users to use mixins.

[nex3]

Looking into this deeper: a @layer statement is actually allowed anywhere in a stylesheet that the block form is, so while it's allowed to be interspersed with @imports it's not required to be. That changes the way we'd handle this situation.

Also, a better alternative for handling this might be to put your @layer rule into its own file, at which point you don't need to use mixins at all:

// _layers.scss
@layer reset, components, utility;

// styles.scss
@use 'layers';
@use 'components';
@use 'pages';

Or better yet, @use layers from the files that specifically refer to the layers in question, since it'll be guaranteed to be emitted before those files.

[nex3]

So we've got an interesting design question here. Currently, the following Sass file:

@layer foo;
@import 'bar.css';

produces:

@import 'bar.css';
@layer foo;

This is a clear violation of CSS compatibility, since the input is valid CSS as-is and the output has different semantics. On the other hand:

a {b: c}
@layer foo;

produces the correct output, behavior that should be retained. That raises the question of how to handle a case like the following:

a {b: c}
@layer foo;
@import 'bar.css';

Should this @layer rule be moved to the top of the file like the @import? Or should it remain in place like the style rule? I can see arguments for both options. I think I lean towards the latter, though—I don't want to encourage users to write useless @import rules just to force a @layer to be hoisted.

[rebehayan]

// _layers.scss
@layer reset, components, utility;

// styles.scss
@use 'layers';
@use 'components';
@use 'pages';

I used this method and solved it.
@import was not used because it is not recommended by SCSS.
Thank you for your comment.
Hope you have a happy day.

[nex3]

Re-opening because we still need to fix the issues described in #3842 (comment)