如何使用css模块/在sass mixin中编写

Question

我得到了以下mixin来为我的应用程序设置主题。

Themes.sass

.theme-dark { background: #000; }

.theme-light { background: #fff; }

$themes: (
  light: (
    primary: #fff,
    secondary: #bfbfbf,
  ),
  dark: (
    primary: #000,
    secondary: #1a1a1a,
  ),
);

@function themed($key) {
  @return map-get($theme-map, $key);
}

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {

    .theme-#{$theme} & { /* HOW TO USE CSS-MODULES HERE ?*/
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }

      @content;
      $theme-map: null !global;
    }

  }
}

要使其工作，我必须使用此文件的css-module类.theme-dark ___ quyAn而不是原始的theme-dark类。否则，以下实现将编译为：

.searchBar {
  @include themify($themes) {
    color: themed('primary');
    background: themed('secondary');
  }

  height: 3em;
  overflow: hidden;

===编译===>

.searchBar___2VGO9 {
  height: 3em;
  overflow: hidden;
}

.theme-light .searchBar___2VGO9 {
  color: #fff;
  background: #bfbfbf;
}

.theme-dark .searchBar___2VGO9 {
  color: #000;
  background: #1a1a1a;
}

===预期===>

.searchBar___2VGO9 {
  height: 3em;
  overflow: hidden;
}

.theme-light___alpGY .searchBar___2VGO9 {
  color: #fff;
  background: #bfbfbf;
}

.theme-dark___quyAn .searchBar___2VGO9 {
  color: #000;
  background: #1a1a1a;
}

有人知道如何在mixin函数中使用sass compose吗？