WebPack的CSS加载程序与UglifyJS插件结合使用时中断的css关键帧动画

Question

我们在应用程序中使用este.js开发堆栈，它使用webpack来捆绑JS & CSS资产。Webpack 配置在构建生产env和stylus-loader时使用webpack.optimize.UglifyJsPlugin，很好的为生产env提供了准确的装载机配置。如下：

ExtractTextPlugin.extract(
  'style-loader', 
  'css-loader!stylus-loader'
);

然后我有3个样式文件：

// app/animations.styl
@keyframes arrowBounce
  0%
    transform translateY(-20px)
  50%
    transform translateY(-10px)
  100%
    transform translateY(-20px)

@keyframes fadeIn
  0%
    opacity 0
  50%
    opacity 0
  100%
    opacity 1

// components/component1.styl
@require '../app/animations'

.component1
  &.-animated
    animation arrowBounce 2.5s infinite

// components/component2.styl
@require '../app/animations'

.component2
  &.-visible
    animation fadeIn 2s

在产品构建之后，两个关键帧动画都被重命名为a (可能是通过css-clean进行了一些CSS小型化)，并且您可以推断fadeIn会因为缩小后的同名和更高的优先级而重写arrowBounce。

使用语句将文件components/component1.styl和components/component2.styl包含在它们的React组件文件[name].react.js中：

import 'components/component1.styl'; 
import 'components/component2.styl';

我要疯了。尝试了许多不同的解决方案，但没有一个真正奏效。

Answer 1

原来它是当时最新的CSS加载程序0.15.1的一个新鲜新特征，但是在使用多个单独的CSS文件时，它没有正确工作。现在可以是关机，从0.15.2开始。