css keyframes(css动画)在css_modules不生效解决方案

项目场景：

提示：这里简述项目相关背景：

最近在项目（react）需要实现loading的动画，心想这不很简单么，结果发现动画怎么搞也不生效

---

问题描述

本项目主要是通过react实现，下边主要贴一下简化后的代码

// index.jsx文件
import style from './style.less';
const Loading = () => (
  <div className={
    
    style['loading-container']}>
    <div class="loading" />
  </div>
);
export default Loading;

// style.less文件
.loading-container {
    
    
  height: 100vh;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  :global {
    
    
    .loading {
    
    
      width: 30px;
      height: 30px;
      border: 2px solid #000;
      border-top-color: transparent;
      border-radius: 100%;
      animation: circle infinite 0.75s linear;
    }
    // 动画
    @keyframes circle {
    
    
      0% {
    
    
        transform: rotate(0);
      }
      100% {
    
    
        transform: rotate(360deg);
      }
    }
  }
}

---

原因分析：

打开F12，在样式中确实没有找到circle这个动画名称，那大概率应该是被postcss这个插件编译了，所以我们只需要能让这个名字不编译或者是找到编译后的名字即可

---

解决方案：

解决方案很简单，调用@keyframes的元素后面添加 :local 就行了

// index.jsx文件
import style from './style.less';
const Loading = () => (
  <div className={
    
    style['loading-container']}>
    <div class="loading" />
  </div>
);
export default Loading;

// style.less文件
.loading-container {
    
    
  height: 100vh;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  :global {
    
    
    .loading {
    
    
      width: 30px;
      height: 30px;
      border: 2px solid #000;
      border-top-color: transparent;
      border-radius: 100%;
      & :local {
    
    
        animation: circle infinite 0.75s linear;
      }
    }
  }
}
// 动画
@keyframes circle {
    
    
  0% {
    
    
    transform: rotate(0);
  }
  100% {
    
    
    transform: rotate(360deg);
  }
}

参考链接：issue