CSS Module解決全局或本地使用@keyframes無效問題

最近使用CSSModule開發react項目，遇到一個問題，使用@keyframes無效，問題如下

/** less + css module **/
:global {
   .effect-bottom {
      animation: globeRotate 0.5s linear infinite;
    }

    @keyframes globeRotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(-360deg);
      }
    }
}

/** 編譯結果如下 **/
.pages-style-gameWrap .effect-bottom {
  top: auto;
  bottom: 0;
  animation: globeRotate 0.5s linear infinite;
}
@keyframes pages-style-globeRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

可以看到 @keyframes 名稱也被編譯了，這樣就獲取不到 @keyframes 的名稱了，解決辦法如下（只需在調用@keyframes的元素后面添加 :local  就行了）：

:global {
    .effect-bottom :local {
      animation: globeRotate 0.5s linear infinite;
    }

    @keyframes globeRotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(-360deg);
      }
    }
}

/** 編譯結果如下 **/
.pages-style-gameWrap .effect-bottom {
  top: auto;
  bottom: 0;
  animation: pages-style-globeRotate 0.5s linear infinite;
}
@keyframes pages-style-globeRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}