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

user_1283501 0
Viewed 12586

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?

sass
2 Answers
  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!

user_143044980

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

Thanks to @Arkellys.

HTH someone.

user_12835010
Related