scss-bundle error: @use rules must be written before any other rules

Question

I have a file structure like this:

---- _base-map.scss
---- _child-map-1.scss
---- _child-map-2.scss
---- _child-map-3.scss
styles.scss

styles.scss imports all the child map files:

@import './base-map';
@import './child-map-1';
@import './child-map-2';
@import './child-map-3';

So far so good.

_base-map.scss :

$base-map : (
    "font-size"                 : 1.3rem,
    "border-radius"             : 0.4rem,
    // ...
);

In order to use "map.merge", @use "sass:map" has to be included:

_child-map-1.scss :

@use "sass:map";
$child-map-1 : map.merge(
    $base-map,
    (
            "font-size"                 : 2rem,
            "border-radius"             : 0.5rem,
    // ...
    )
);

But when I try to bundle the files with scss-bundle I get this error :

[17:22:37] erro: There is an error in your styles:
[17:22:37] erro: @use rules must be written before any other rules.
[17:22:37] erro:     ╷
[17:22:37] erro: 838 │ @use "sass:map";
[17:22:37] erro:     │ ^^^^^^^^^^^^^^^
[17:22:37] erro:     ╵
[17:22:37] erro:   stdin 838:1  root stylesheet on line (838, 1)

When I don't include @use "sass:map" the scss compiler complains about map.merge.

What's the right way to solve this?

Aggri

Since you are using @import simply use map-merge() (which doesn't require @use). – Fellowship

That solved it. Thanks!! – Aggri

Answer 1

I had to change "map.merge" to "map-merge" to make it work.

Thanks to @Arkellys.

HTH someone.

Aggri

This is not a solution but a workaround – Thrasher

Answer 2

1. Delete theme-style.scss
2. Open angular.json file and look for- architect- build- styles- remove this line- "src/custom-theme.scss"

You are all-set!

Bollard

Answer 3

I'll post how I solved this error since the accepted answer was not ideal. The goal is to move away away from map-get and use the recommended map.get function.

There's an Index.scss file that looked like this which would produce the error above.

@use "sass:map";
@import "../../file1.scss";
@import "../../file2.scss";

$width: 98px;
.someClassName {
  z-index: map.get($someValue, 'someString');
}

To solve the issue the content of the SCSS file was mostly moved to subfile.scss. In that subfile the @use "sass:map" works without issues. Most likely since the @imports are not in that file.

---

Working example:

@import "../../file1.scss";
@import "../../file2.scss";
@import "./subfile";

The subfile where @use: "sass:map" is.

/* subfile.scss */

@use "sass:map"

$width: 98px;
.someClassName {
  z-index: map.get($someValue, 'someString');
}

Note: We should be moving away from @import.

Jugate