使用WebPack'；带UglifyJS插件的css加载程序

我们在应用程序中使用webpack绑定JS和CSS资产。在为生产环境和触笔加载器构建时使用

Webpack.optimize.UglifyJsPlugin

的网页包，以及生产环境的确切加载器配置。详情如下:

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

然后我有3个styl文件：

// 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';

---

我快发疯了。尝试了许多不同的解决方案，但没有一个真正起作用。

结果表明，这是当时最新的css loader 0.15.1的一个版本，但在使用多个单独的css文件时，它无法正常工作。现在可以从0.15.2开始了。

这似乎是由最新的css加载器0.15.1造成的，该加载器打破了许多基于css的东西。版本0.14.5工作正常，但在多次需要animations.styl时会生成重复的关键帧。