在Svelte Material UI的_smui-theme.scss中添加SCSS报错：color-palette模块重复

安全阿岳

2026-7-28

解决SCSS编译时的"color-palette"命名空间重复错误

这个错误的核心原因是你在同一个SCSS文件里重复使用@use导入了@material/theme/color-palette模块，SCSS的模块化规则不允许同一个命名空间被多次绑定。

具体解决步骤：

找到代码里Snackbar相关注释下方的@use '@material/theme/color-palette';这一行，直接删除即可——文件顶部已经导入过这个模块，整个文件范围内都可以直接使用color-palette命名空间调用变量。

修改后的完整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/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;
}