Sass-migration with Angular Material

Question

I have in Angular Material a global style style sheet with many definitions. I use the @import from the SASS operator. According to the docu I should migrate the imports since they are deprecated - preferably with the new sass-migration for usage with the (new) @use

In my sample.scss I have

@import 'styles_angular_material_mdc_adapt.scss';
@keyframes color-change {
    @each $value, $name in map-get($my-theme, network-broken, animation, level) {
        #{$value} {
            color: #{$name};
        }
    }
}

While in my styles_angular_material_mdc_adapt.scss I have

@use '@angular/material' as mat;
@use 'sass:map';
@import 'theme_color_paletts.scss';

$breakpoint-sm: 576px;

:root {....}
$my-theme: {....

When I try to run the migration script like

>node_modules/.bin/sass-migrator --verbose --migrate-deps --load-path <path-2-style-file>/styles-global-module sample.scss

I get the following error

Error: Could not find Sass file at '@angular/material'.
  ╷
6 │ @use '@angular/material' as mat;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

So, how to correct the sass-migrator to get rid of the new

Answer 1

Add the load-path option with the Node installed modules, e.g.:

sass-migrator --migrate-deps --load-path=./node_modules module src/main.scss