"@use rules must be written before any other rules" error occured with multiple themings

[PhilippeLafreniere18]

Hi, Our app is build with multiple themings sheets and Angular 12. A main theming file imports some and these imports some other theming files too (simple parent-children logic). I tried to use new scss-bundle rules (@use vs @import) but this scss-bundle error always occured when i tried to compile all of it : @use rules must be written before any other rules

My main theming file is something like this :

@import './theming';
@import '../../../common/src/style/common.theming';

@mixin all-theming($theme, $typography) {
  @include theming($theme, $typography);
  @include common-theming($theme, $typography);
}

"theming" is built like this :

@use '~@angular/material' as mat;

@mixin theming($theme, $typography) {
  @include mat.core($typography);
  @include angular-material-theme($theme);

  $primary: mat.define-palette(mat.$blue-palette, 700, 400, 900);
  $accent: mat.define-palette(mat.$blue-palette, 200);
...
}

and "common-theming" looks like this :

@use '~@angular/material' as mat;

@mixin common-theming($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  entity-table {
    background-color: mat.get-color-from-palette($primary, A100);
    color: mat.get-color-from-palette($primary, default-contrast);
  }
}

I need the @use rule in each file to set namespace ("mat" in my case) and to allow the use of theming functions. What do I need to make this right ?

Here Angular12 doc for theming (https://material.angular.io/guide/theming)

Package version: v1.35.1 (sass) Node version: v14.17.1 OS: Windows

[PopescuStefanRadu]

check out https://github.com/reactway/scss-bundle/issues/90