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

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 { ... }

我做过的事情

1. 尝试了各种各样的洒水用途:当地的地方
2. 发现了一个未解决的问题539,但过去一周内没有任何行动或回应
3. 尝试版本28.1(最新),27.3和锯26也不起作用
4. 考虑放弃网站开发
5. 评论拉请求
6. 试图解决问题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"

目前相关的webpack部分:

{
        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;

你的命名看起来很好.我看到围绕全局命名和动画命名冲突的很多错误,但这似乎不是你的问题.