在生产版本中生成多个具有相同名称的关键帧（不使用 css 模块）答案

【问题标题】：Multiple keyframes are generated with same name in production build(not using css modules)在生产版本中生成多个具有相同名称的关键帧（不使用 css 模块）
【发布时间】：2018-07-17 14:11:26
【问题描述】：

我们没有在我们的项目中使用 css 模块。编译产品构建时多个关键帧具有相同的名称。我们如何告诉 css-loader 停止修改关键帧名称？由于这个问题，错误的关键帧动画被应用于错误的 dom 节点。

"css-loader": "^0.26.0",
"webpack": "^4.10.2",

任何建议将不胜感激

已经在 css-loader 上提出了问题 https://github.com/webpack-contrib/css-loader/issues/749

【问题讨论】：

标签： reactjs css-loader webpack-4

【解决方案1】：

为其他人的参考和要求添加答案。所以我没有在我的项目中使用 css-modules 并且 webpack 4 prod build 在一个范围内重命名了一些具有相同名称“a”的关键帧。我是如何解决这个问题的：

我添加了 postcss-loader 可以在插件和加载器中添加 cssProcessor 选项。对于“cssNano”，您可以通过某些选项告诉不要重命名关键帧名称。

Install cssnano first

npm install --save-dev cssnano

in your webpack config file. //for my case it was webpack.prod.config.js
const cssNano = require("cssnano")

In your loader add following for postcss-loader
 {
            loader: "postcss-loader",
            options: {
              config: {
                ctx: {
                  cssnano: {
                    reduceIdents: false,
                  },
                },
              },
            },
          },

And add following for Plugins:
//using optimize-css-assets-webpack-plugin for minimification of css
new OptimizeCSSAssetsPlugin(
      {
        cssProcessor: cssNano,
        cssProcessorOptions: {
          assetNameRegExp: /\.css$/,
          discardComments: { removeAll: true },
          reduceIdents: false,
        },
      }
    ),

该配置停止重命名 keframe 并且动画开始正常工作。希望这可以帮助。

【讨论】：

【解决方案2】：

如果您使用低于 4.0 的 cssnano 版本，可能会发生这种情况。从 4.0 版本开始，cssnano 默认不再重命名动画（reduceIdents 默认关闭）。

https://cssnano.co/guides/optimisations/

所以更新到最新版本的 cssnano 会自动解决问题

【讨论】：

【解决方案3】：

关键帧可以采用自定义标识符或字符串作为名称；后者用引号括起来。更好的解决方法是使用关键帧的字符串标识符：例如：

@keyframes 'cd-fade-in' {...}
...
animation: 'cd-fade-in'...

名称保留在编译后的 css 中，无需更改 cssnano 中的优化参数。

https://www.w3.org/TR/css-animations-1/#typedef-keyframes-name

【讨论】：