webpack - 将 WebPack 的 css-loader 与 UglifyJS 插件一起使用时，CSS 关键帧动画损坏

Question

我们正在使用este.js dev stack在我们的应用程序中，它使用 webpack 来捆绑 JS 和 CSS 资源。网络包 is configured在构建生产环境和 stylus-loader 时使用 webpack.optimize.UglifyJsPlugin 以及生产环境的确切加载器配置。如下:

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

原来这是一个fresh new feature当时最新的 css-loader 0.15.1 但在使用多个单独的 CSS 文件时它无法正常工作。可以是turned off现在从 0.15.2 开始。