How to use @layer when migrate sass to Dart Sass 3.0.0

[Viktoria-ol]

Hi! In tailwind.css i use @layer components { @import '@/styles/components'; }. But recently i started to receive deprecation warning "DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0." I know that in new sass need to use @use or @forward directives instead. but they are not allowed to be used inside @layer. So how to do migration correctly in this case?

[wongjn]

You can try tagging the @import instead (not sure how Sass interprets this though):

@import '@/styles/components' layer(components);

[Viktoria-ol]

No, unfortunately it doesn't work as expected, styles are broken then. And also @import tag is deprecated, so it will still cause these warnings i suppose

[wongjn]

From sass/sass#3240 (comment):

I'm not a huge fan of this, since we're generally trying to encourage users to move away from writing a bunch of files that all directly emit CSS and towards exposing mixins that the entrypoint can compose as it chooses. In this case, you can already effectively model most of this behavior using meta.load-css():

@use 'sass:meta';

@layer reset {
  @include meta.load-css('reset');
}

[Viktoria-ol]

This works. thanks a lot!