How to add SCSS into _smui-theme.scss for components in Svelte Material UI?

Question

I want to add the Colored snackbars component. However, I get the following error when compiling:

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

My SCSS file is the same as in the documentation Theming. I simply added the 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

what you wanna do is create a new file called 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)
      );
    }

This is the example from the SMUI Docs but with @use "@smui/snackbar/style"; prepended.

You can then @use that file over in your _smui-theme.scss like this.

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