Как добавить SCSS в _smui-theme.scss для компонентов в пользовательском интерфейсе Svelte Material?

Question

Я хочу добавить компонент «Цветные закусочные» . Однако при компиляции я получаю следующую ошибку:

Error: There's already a module with namespace "color-palette".\n

Мой файл SCSS такой же, как в документации Theming. Я просто добавил Snackbar SCSS:

      @use '@material/theme/color-palette';

$background: #fff;

@use '@material/theme/index' as theme with (
  $primary: color-palette.$purple-500,
  $secondary: color-palette.$teal-600,
  $surface: #fff,
  $background: $background,
  $error: #b00020
);

// See https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-snackbar
@use '@material/snackbar/mixins';
// See https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-theme
@use '@material/theme/color-palette';
@use '@material/theme/theme-color';

.mdc-snackbar.demo-success {
  @include mixins.fill-color(color-palette.$green-500);
  @include mixins.label-ink-color(
    theme-color.accessible-ink-color(color-palette.$green-500)
  );
}

.mdc-snackbar.demo-warning {
  @include mixins.fill-color(color-palette.$orange-500);
  @include mixins.label-ink-color(
    theme-color.accessible-ink-color(color-palette.$orange-500)
  );
}

.mdc-snackbar.demo-error {
  @include mixins.fill-color(color-palette.$red-500);
  @include mixins.label-ink-color(
    theme-color.accessible-ink-color(color-palette.$red-500)
  );
}

html,
body {
  background-color: $background;
  color: if(theme.contrast-tone($background) == 'dark', #000, #fff);
}

a {
  color: color-palette.$blue-500;
}
a:visited {
  color: color-palette.$blue-800;
}

Answer 1

то, что вы хотите сделать, это создать новый файл с именемmyStyle.scss.

          @use "@smui/snackbar/style"; //<- This line here is new
    @use '@material/snackbar/mixins';
    @use '@material/theme/color-palette';
    @use '@material/theme/theme-color';
    
    .mdc-snackbar.demo-success {
      @include mixins.fill-color(color-palette.$green-500);
      @include mixins.label-ink-color(
        theme-color.accessible-ink-color(color-palette.$green-500)
      );
    }
    
    .mdc-snackbar.demo-warning {
      @include mixins.fill-color(color-palette.$orange-500);
      @include mixins.label-ink-color(
        theme-color.accessible-ink-color(color-palette.$orange-500)
      );
    }
    
    .mdc-snackbar.demo-error {
      @include mixins.fill-color(color-palette.$red-500);
      @include mixins.label-ink-color(
        theme-color.accessible-ink-color(color-palette.$red-500)
      );
    }

Это пример из документации SMUI , но с@use "@smui/snackbar/style";добавлено.

Тогда ты сможешь@useэтот файл у тебя в_smui-theme.scssтак.

          @use 'sass:color';
    @use '@material/theme/color-palette';
    
    // Svelte Colors! (Dark Theme)
    @use '@material/theme/index' as theme with (
      $primary: #ff3e00,
      $secondary: color.scale(#676778, $whiteness: -10%),
      $surface: color.adjust(color-palette.$grey-900, $blue: +4),
      $background: #000,
      $error: color-palette.$red-700
    );

    @use "PATH/myStyle.scss"; //<--- your snackbar styles
    
    html,
    body {
      background-color: #000;
      color: theme.$on-surface;
    }
    
    a {
      color: #40b3ff;
    }
    a:visited {
      color: color.scale(#40b3ff, $lightness: -35%);
    }