React应用构建部署到Firebase后CSS关键帧动画失效问题

问题根因 #

你的问题是React生产构建时CSS压缩工具对keyframes重命名，导致动画声明与引用不匹配，和Firebase Hosting部署无关，具体原因：

1. Create React App（CRA）默认生产构建会使用CSS压缩工具对CSS Module中的标识符（包括keyframes名称）做混淆重命名，减少打包体积
2. 你手动给keyframes添加了多套浏览器前缀声明，压缩工具处理时只会重命名标准@keyframes的名称，不会同步修改带前缀的@keyframes以及animation属性中的引用值，最终导致部署后浏览器找不到对应名称的关键帧，动画失效。

解决方案 #

第一步：删除手动添加的前缀 #

CRA内置了PostCSS Autoprefixer，会自动根据你配置的目标浏览器生成对应前缀，不需要手动写。直接删除AnimatedSlideShowText.module.css中所有带-webkit-/-moz-/-ms-/-o-前缀的@keyframes声明，只保留标准无前缀的两个@keyframes即可：

@keyframes slide {
  100% {
    margin-left: 0%;
    opacity: 100%;
  }
}

@keyframes show {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

修改后先本地执行npm run build，再执行npx serve -s build启动本地静态服务验证构建后动画是否正常，90%以上的情况这一步就能解决问题。

第二步：（可选）配置禁用keyframes重命名 #

如果第一步处理后还是有问题，说明压缩工具还是对keyframes名做了错误处理，可以通过配置关闭keyframes名称混淆：

1. 如果你没有eject CRA配置，安装@craco/craco修改构建配置

npm install @craco/craco --save-dev

2. 项目根目录新建craco.config.js，写入以下配置：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 找到CSS压缩插件配置
      const cssMinimizerPlugin = webpackConfig.optimization.minimizer.find(
        (item) => item.constructor.name === "CssMinimizerPlugin"
      );
      if (cssMinimizerPlugin) {
        // 关闭keyframes重命名
        cssMinimizerPlugin.options.minimizerOptions.preset = [
          "default",
          { keyframes: false },
        ];
      }
      return webpackConfig;
    },
  },
};

3. 修改package.json中的build脚本：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

重新构建测试即可。

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