解决 css-loader 对@keyframes 别名的破坏

我尝试使用 React、animation、CSS Modules（SASS）做一个简单的动画。 结果发现css-loader 总是 对@keyframes 别名进行破坏。最终解决方案就是，你必须把动画的名字放在第一位。

1、案例：

@keyframes rainbow {
  0% {
    left: -20%;
  }
  100% {
    left: 120%;
  }
}

.skeletonCover {
  animation: 1s rainbow infinite forwards;
}

2、编译后结果，在style上：

@keyframes _2x0iKVh6JB1-TDkksxJ3jT {
  0% {
    left: -20%;
  }
  100% {
    left: 120%;
  }
}
._3zRCw0DAZMBc8pAcZfcZt8 {
  animation: 1s :local(rainbow) infinite forwards;
}

3、我想要的编译结果：

@keyframes _2x0iKVh6JB1-TDkksxJ3jT {
  0% {
    left: -20%;
  }
  100% {
    left: 120%;
  }
}
._3zRCw0DAZMBc8pAcZfcZt8 {
  animation: 1s _2x0iKVh6JB1-TDkksxJ3jT infinite forwards;
}

4、我做过的事情：

• 通过css全局作用域(:global)让css样式名称不再哈希化

// 案例：
@keyframes :global(rainbow) {
  0% {
    left: -20%;
  }
  100% {
    left: 120%;
  }
}
.skeletonCover :global {
  animation: 1s rainbow infinite forwards;
}

// 编译后结果：
@keyframes rainbow {
  0% {
    left: -20%;
  }
  100% {
    left: 120%;
  }
}
._3zRCw0DAZMBc8pAcZfcZt8 {
  animation: 1s rainbow infinite forwards;
}

但是vscode对这种全局标识会报错：

• 必须把动画的名字放在第一位

// 案例：
@keyframes rainbow {
  0% {
    left: -20%;
  }
  100% {
    left: 120%;
  }
}
.skeletonCover  {
     animation: rainbow 1s infinite forwards;
}

// 编译后结果：
@keyframes _2x0iKVh6JB1-TDkksxJ3jT {
  0% {
    left: -20%;
  }
  100% {
    left: 120%;
  }
}
._3zRCw0DAZMBc8pAcZfcZt8 {
  animation: _2x0iKVh6JB1-TDkksxJ3jT 1s infinite forwards;
}