使用 Angular Material 进行 Sass 迁移

Question

我在 Angular Material 中有一个具有许多定义的全局样式表。我使用 SASS 运算符中的

@import

。根据文档，我应该迁移

imports

，因为它们已被弃用 - 最好与新的

sass-migration

一起使用，以便与（新）

@use

一起使用

在我的

sample.scss

我有

@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};
        }
    }
}

在我的

styles_angular_material_mdc_adapt.scss

我有

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

$breakpoint-sm: 576px;

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

当我尝试运行迁移脚本时

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

我收到以下错误

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

那么，如何纠正

sass-migrator

以摆脱新的

Answer 1

为 Node 安装的模块添加

load-path

选项，例如：

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