使用CSS Modules+css-loader时，如何在JSX中引用编译后的关键帧名称？

这确实是CSS Modules使用时很常见的一个小坑——它会自动给所有类名、关键帧名称加上哈希前缀，导致你在JSX里硬写的fade-out-long和编译后的LoadingOverlay-module__fade-out-long完全不匹配，动画自然就失效了。我给你几个实用的解决方案，按推荐程度排序：

方案1：从SCSS模块导出动画名称（最推荐） #

CSS Modules支持通过:export语法把样式文件里的变量暴露给JS，刚好可以用来导出处理后的动画名称。

首先修改你的LoadingOverlay.scss：

@import '../../../constants/animations';

// 先包含关键帧
@include fade-out-long-keyframes();
@include fade-out-long2-keyframes();

// 导出动画名称供JS组件使用
:export {
  fadeOutLong: fade-out-long;
  fadeOutLong2: fade-out-long2;
}

然后在你的LoadingOverlay组件里，导入这个导出的变量并使用：

import styles from './LoadingOverlay.scss';

// 替换硬写的动画名称
if (show) {
  return { animation: `${styles.fadeOutLong} ${duration}ms ease-out forwards` };
}

这个方法完美贴合CSS Modules的模块化设计，既保留了样式隔离，又能安全引用哈希后的正确名称，不会有全局冲突的风险。

方案2：将动画设置为全局名称 #

如果你不想额外导出变量，可以让CSS Modules不对关键帧名称进行哈希处理，只需要用:global()包裹关键帧定义即可。

修改你的animations常量文件中的mixin：

@mixin fade-out-long-keyframes() {
  :global(@keyframes fade-out-long) {
    0% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
  }
}

这样编译后的动画名称还是fade-out-long，你在JSX里硬写的名称就能直接匹配上了。不过要注意，全局名称可能会和其他组件的动画名冲突，适合小型项目或者你能确保名称唯一的场景。

方案3：用类名+CSS变量控制动画 #

把动画逻辑完全放在CSS里，JS只负责添加类名和传递动态参数（比如duration），这样就不用在JS里直接写动画名称了。

在LoadingOverlay.scss里定义类：

@import '../../../constants/animations';

@include fade-out-long-keyframes();

.fadeOutLong {
  animation: fade-out-long var(--duration) ease-out forwards;
}

然后在组件的JSX中动态添加类名，并通过CSS变量传递duration：

import styles from './LoadingOverlay.scss';

// 遮罩节点的JSX
<div
  className={show ? styles.fadeOutLong : ''}
  style={{ '--duration': `${duration}ms` }}
>
  {/* 加载内容 */}
</div>

这个方法把样式和JS逻辑做了更好的分离，适合更注重样式内聚的场景。

内容的提问来源于stack exchange，提问作者Jorayen