How to migrate cases that make use of @content and @import with @content and @forward

I’m migrating a codebase from using @import to @use and @forward. Most of it is okay but I’m unsure what to do in a case where @import is used with @content.

Considering the following mixing that the only goal is to wrap styles in a class:

@mixin alternative-styles {
  .parent-class {
    @content;
  }
}

The mixin is then used with @import to wrap all those styles in a .parent-class:

@include alternative-styles {
  @import 'components';
}

I assumed replacing it with a @forward wouldn’t work but have it a try anyway in this way:

@include alternative-styles {
  @forward 'components';
}

This threw the following error:

Error: This at-rule is not allowed here.
   ╷
22 │   @forward 'components';
     │   ^^^^^^^^^^^^^^^^^^^^^
   ╵

Is there any way to achieve wrapping a bunch of styles in a class that supports the @use and @forward rules?

Thanks a lot in advance!

[jathak]

You shouldn’t need to do a separate compilation.

Do components/buttons and components/text actually emit any CSS? If they do, it should be included by meta.load-css.

[csalmeida]

I have found that the sass-migration tool solves the issue this way:

@use 'sass:meta';
@use 'mixins';

@include mixins.alternative-styles {
  @include meta.load-css('components');
}

The components.scss files has multiple @forward statements to keep all component references in one place like this:

// components.scss
@forward 'components/buttons';
@forward 'components/text';

After the sass compiler runs it results in an empty block:

.parent-class {
}