使用带有UglifyJS插件的WebPack的css-loader时,CSS关键帧动画损坏了

Question

我们在我们的应用程序中使用este.js dev stack,它使用webpack捆绑JS和CSS资产.Webpack 配置为webpack.optimize.UglifyJsPlugin在为生产环境构建时使用stylus-loader,以及生产环境的精确加载程序配置.如下:

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缩小css-clean),因为你可以推断fadeIn覆盖,arrowBounce因为缩小后名称和优先级相同.

文件components/component1.styl和components/component2.styl被包含在他们的阵营组件文件[name].react.jsusing语句:

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

我疯了.尝试了许多不同的解决方案但没有真正有用.

Answer 1

事实证明，这是当时最新的 css-loader 0.15.1 的一个全新功能，但在使用多个单独的 CSS 文件时它无法正常工作。从 0.15.2 开始可以将其关闭。