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
Add the load-path
option with the Node installed modules, e.g.:
sass-migrator --migrate-deps --load-path=./node_modules module src/main.scss