Question

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

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

任何建议都会受到赞赏

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

Answer 1

添加答案以供他人参考和要求。因此，我没有在项目中使用css-modules，并且webpack 4 prod构建在一个作用域中重命名了一些具有相同名称“ 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，并且动画开始正常工作。希望这可以帮助。

Answer 2

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

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

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

Answer 3

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

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

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

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

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

3 个答案: