Question

我正在尝试在使用css-modules和webpack构建系统的react应用程序中使用关键帧动画。

重现问题的最简单示例：

.confirmRemove {
  animation: 150ms appear ease-in;
}
@keyframes appear { ... }

编译为：

.comparators__confirmRemove__32JB0 {
  -webkit-animation: 150ms :local(appear) ease-in;
  animation: 150ms :local(appear) ease-in;
}

@keyframes comparators__appear__KTI43 { ... }

应该是什么：

.comparators__confirmRemove__32JB0 {
  -webkit-animation: 150ms comparators__appear__KTI43 ease-in;
  animation: 150ms comparators__appear__KTI43 ease-in;
}

@keyframes comparators__appear__KTI43 { ... }

我做过的事情

尝试各种洒水用途：当地的地方
找到了一个未解决的问题539，但过去没有采取任何行动或回复周
尝试版本28.1（最新），27.3，并且看到26无法正常工作
考虑放弃网站开发
对拉请求发表评论
尝试了问题264

我需要什么

一个已知版本的css-loader，适用于关键帧动画和css模块或解决方法，直到作者修复此问题。

其他相关信息

节点版本7.9

当前相关的package.json：

"autoprefixer": "7.1.1",
    "css-loader": "0.28.1",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "node-sass": "4.5.3",
    "sass-loader": "6.0.5",
    "style-loader": "0.18.1",
    "url-loader": "0.5.8",
    "webpack": "2.5.1",
    "webpack-bundle-analyzer": "2.8.2",
    "webpack-dev-middleware": "1.10.2",
    "webpack-hot-middleware": "2.18.0",
    "webpack-md5-hash": "0.0.5"

当前相关的网络包部分：

{
        test: /(\.css|\.scss|\.sass)$/,
        use: [
          {loader: 'style-loader'},
          {
            loader:'css-loader',
            options:{
              sourceMap:true,
              modules: true,
              localIdentName: '[local]---[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options:{
              sourceMap: true,
              plugins:()=>[
                autoprefixer()
              ]
            }
          },
          {
            loader: 'sass-loader',
            options:{
              sourceMap:true,
              includePaths: [path.resolve(__dirname, 'src', 'scss')]
            }
          }
        ]
      }

Answer 1

您必须先放置动画的名称

# this
  animation: appear 150ms ease-in;

# not this
  animation: 150ms appear ease-in;

你的命名看起来很好。我在全局命名和动画命名冲突方面看到了很多错误，但这似乎不是你的问题。

css-loader打破了模块和关键帧动画

1 个答案: